使用输入导入 3D 模型

Question

我想知道如何导入带有输入的 3D 模型（stl、obj 和 mtn）

目前我已经通过道具 pathModelObj 和 pathModelMtl 硬写了它

但是，我希望它在导入 3D 模型时是动态的。

我用的是react三纤库，想知道有没有人已经成功了

// IMPORT LIBRARY
import React, { Suspense, useEffect, useRef, useState} from "react";
import { Canvas, useLoader, useThree } from "react-three-fiber";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
import { EffectComposer, Outline } from "@react-three/postprocessing";
import * as THREE from "three";
import { OrbitControls } from "@react-three/drei";


// IMPORT COMPONENTS
import Model from "./components/Model";
import TextHelper from "./components/TextHelper";
import Navbar from "./components/Navbar"

import "./App.css";

//IMPORT MODELS 3D
import pathModelStl from "./assets/models_stl/Stanford_Bunny_sample.stl";
import pathMtl from "./assets/models_obj/Jabra/JABRA.mtl";
import pathObj from "./assets/models_obj/Jabra/JABRA.obj";

// import { Scene } from "three";

const ModelStl = () => {
  const geom = useLoader(STLLoader, pathModelStl);

  const ref = useRef();
  const { camera } = useThree();
  useEffect(() => {
    console.log(ref);
    camera.lookAt(ref.current.position);
  }, []);

  return (
    <>
      <mesh ref={ref} rotation={[-Math.PI / 2, 0, 0]} scale={0.1}>
        <primitive
          object={geom}
          attach="geometry"
          position={[0, 0, 0]}
          segments={10}
        />
        <meshStandardMaterial color={"gray"} attach="material" />

        <EffectComposer autoClear={false}>
          <Outline selection={ref} visibleEdgeColor="black" edgeStrength={15} />
        </EffectComposer>
      </mesh>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
    </>
  );
};


function App() {

  useEffect(() => {
    
    
  }, [])


  return (
    <>
      <Navbar/>
      <Canvas
        orthographic={true}
        camera={{ position: [-500, 400, -500], zoom: 10 }}
        onCreated={(gl) => {
          gl.camera.lookAt(new THREE.Vector3(0, 0, 0));
          console.log(gl.camera);
        }}
      >
        <ambientLight intensity={0.1} />
        <directionalLight color="white" position={[0, 0, 5]} />
        <Suspense fallback={null}>
          <Model pathModelObj={pathObj} pathModelMtl={pathMtl} />

          <TextHelper
            position={[30, 0, 0]}
            text="BACK"
            rotation={[-Math.PI / 2, 0, -Math.PI / 2]}
          />
          <TextHelper
            position={[-30, 0, 0]}
            text="FRONT"
            rotation={[-Math.PI / 2, 0, Math.PI / 2]}
          />
          <TextHelper
            position={[0, 0, 30]}
            text="LEFT"
            rotation={[Math.PI / 2, Math.PI, 0]}
          />
          <TextHelper
            position={[0, 0, -30]}
            text="RIGHT"
            rotation={[-Math.PI / 2, 0, 0]}
          />
          <OrbitControls enableDamping={false} />
        </Suspense>
        <gridHelper args={[50, 50, 0x000000, 0xc9c9c9]} />
      </Canvas>
    </>
  );
}
export default App;

Answer 1

您可以使用FileReader.readAsDataURL()获取上传的文件作为数据URL。这可以传递给 STLLoader 代替文件名。

使用输入导入 3D 模型

Import a 3D model with an input

three.js

reactjs