我无法让 Three.js 从导入的 OBJ 文件渲染场景

Question

我无法在HTML画布上显示Three.js场景。我正在导入一个正确导入的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控件解决了我的问题，这让我花了两个模型。然后，我使用object.scale.set(.0001、.0001、0.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} />
        </>
}