我无法从导入的 OBJ 文件中获取三个 js 来渲染场景

Question

我无法让我的 three.js 场景显示在 html canvas 上。 我正在导入正确导入的 OBJ 文件。 它正确显示所有细节，如网格、材料等。 这是我的代码：

  export function TestScene() {
  const mountRef = useRef(null);
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 
  1000);
  const renderer = new THREE.WebGLRenderer();
  const loader = new THREE.OBJLoader();
  renderer.setSize(window.innerWidth, window.innerHeight);

  useEffect(() => {

  mountRef.current.appendChild(renderer.domElement);

  const animate = function () {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
  };

loader.load(

  'object.obj',

  function (object) {
    scene.add(object);
    camera.position.z = 100;

  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');

  },
  function (error) {

    console.log(error);

  }
);

animate()

}, [])


return <>
  <h1 id='test' style={{ color: 'black' }}>blahhh</h1>
  <div ref={mountRef} />
   </>
}

Answer 1

我能够通过配置 Orbital 控件来解决我的问题，这需要我两个 model。 然后我使用 object.scale.set(.0001, .0001, .0001); 调整了缩放比例。

import { tsExportAssignment } from '@babel/types';
import React, { useEffect, useRef, useCallback } from 'react';
import { MTLLoader} from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
const THREE = require('three')



export function TestScene() {
const [update, setUpdate] = React.useState(0);
const mountRef = useRef(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(100, window.innerWidth / 
window.innerHeight, 0.1, 1000);
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0xffffff, 1);
const loader = new OBJLoader();
const mtlLoader = new MTLLoader()
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 20, 20);
controls.update();


useEffect(() => {

mountRef.current.appendChild(renderer.domElement);

const animate = function () {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};


mtlLoader.load(
  'object.mtl',
  (materials) => {
    materials.preload()
    loader.setMaterials(materials)
    console.log(materials)
    loader.load(

      'object.obj',

      function (object) {
        object.scale.set(.0001, .0001, .0001);
        scene.add(object);
        scene.add(camera);
        scene.add(light);
        console.log(scene)
        animate()

      },
      function (xhr) {
       const loading = (xhr.loaded / xhr.total * 100)
       if(loading === 100){setUpdate(loading)}
       console.log((xhr.loaded / xhr.total * 100) + '% loaded');

      },
      function (error) {

        console.log(error);

      }
    );
  }
);


}, [])

console.log(scene)
return <>
<>{update !== 100 ? <h5 id='test' style={{ color: 'black' }} 
className="blinking">Loading OBJ..</h5> : <h5 style={{ color: 'black' }}>File 
Loaded, Rendering Scene</h5>}</>
<div ref={mountRef} />
</>

}