reactjs - 在 React 中渲染 STL 文件

Question

我正在尝试使用 https 链接/文件中的react- Three-Fiber 和 Threejs 显示 STL 文件。

问题:

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

此外，我知道我可以定期使用 Threejs 加载文件(没有尝试过这种方式，也不知道 React-3 和 Three 之间的正确集成)，但我不打算使用它，因为我将加载所有文件我的模型通过链接，我只是认为在我的情况下使用 react 三纤维更好？

我尝试过的

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>
    )
}

我收到错误错误:加载./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>