在React中渲染STL文件

Question

我试图从https链接/文件中使用react-three-fiber和three- ejs来显示STL文件

问题:

1. CORS (localhost ->https问题)
2. 无法加载本地文件

我也知道我可以定期使用三个ejs加载文件(没有尝试过这种方式，也不知道react-three和three之间的正确集成)，但我不打算使用它，因为我将通过链接加载我的所有模型，我只是假设react-three-fiber在我的情况下更好使用?

What I've try

import React from 'react';
import {STLLoader} from 'three/examples/jsm/loaders/STLLoader';
import {useLoader} from 'react-three-fiber';
export const Model = ({url}) => {
const res = useLoader(STLLoader,url);

return (
<primitive object={res}/>
)
}

class Layout extends Component {
render() {
const {project} = this.props;
return (
<Canvas>
<Model url={project.tdFiles}/>
</Canvas>
)
}
//project.tDFiles is a string thats a URL to my STL file location
//I've also tired './model.stl' , 'model.stl' to try and load a file locally
}

<标题>模型更新

export const Model = (props) => {
const geom = useLoader(STLLoader, './book.stl')
return (
<Canvas>
<mesh args={[geom]}>
<bufferGeometry ref={geom} attach="geometry"/>
<meshStandardMaterial color="hotpink"/>
</mesh>
<ambientLight/>
<pointLight position={[10, 10, 10]}/>
</Canvas>
)
}

我得到错误Error: failure loading ./book.stl

<标题>最新更新

import React from 'react';
import {STLLoader} from "three/examples/jsm/loaders/STLLoader";
import {Canvas, useLoader} from "react-three-fiber";
import book from './book.stl'
export const Model = ({url}) => {
const geom = useLoader(STLLoader, book)
return (
<Canvas>
<mesh>
<primitive object={geom}/>
<meshStandardMaterial color="hotpink"/>
</mesh>
<ambientLight/>
<pointLight position={[10, 10, 10]}/>
</Canvas>
)
}

我像这样导入它，现在我没有错误，但没有加载任何东西。

Answer 1

模型

export const Model = ({url}) => {
const geom = useLoader(STLLoader, url);
const ref = useRef();
const {camera} = useThree();
useEffect(() => {
camera.lookAt(ref.current.position);
});
return (
<>
<mesh ref={ref}>
<primitive object={geom} attach="geometry"/>
<meshStandardMaterial color={"orange"}/>
</mesh>
<ambientLight/>
<pointLight position={[10, 10, 10]}/>
</>
);
};

<标题>其他组件

<div className="content-div">
<Canvas camera={{ position: [0, 10, 100] }}>
<Suspense fallback={null}>
<Model url={"./RaspberryPiCase.stl"} />
</Suspense>
<OrbitControls />
</Canvas>
</div>

Answer 2

import {Canvas} from '@react-three/fiber'
import {FC, useEffect, useState} from 'react'
import {BufferGeometry} from 'three'
import {STLLoader} from 'three/examples/jsm/loaders/STLLoader'
interface Props {
fileUrl: string
}
const Model: FC<Props> = ({fileUrl}) => {
const [geometry, setGeometry] = useState<BufferGeometry>()
useEffect(() => {
const stlLoader = new STLLoader()
stlLoader.load(fileUrl, geo => {
setGeometry(geo)
})
}, [])
return (
<Canvas>
<ambientLight />
<mesh geometry={geometry}>
<meshStandardMaterial color="#cccccc" />
</mesh>
</Canvas>
)
}
export default Model