在 React 中渲染 STL 文件

Question

我正在尝试使用来自 https link/ 文件的 react-three-fiber 和 threejs 显示一个 STL 文件。

问题：

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

我也知道我可以定期使用 threejs 加载文件（没有尝试过这种方式，我也不知道 react-three 和 3 之间的正确集成）但我不打算使用它，因为我将加载在我所有的模型中通过 link 并且我只是假设 react-three-fiber 更适合我的情况？

我试过的

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