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

Question

我无法让我的 Three.js 场景显示在 HTML 画布上。我正在导入正确导入的 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

我能够通过配置轨道控制来解决我的问题，这让我有了两个模型。然后我使用 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} />
        </>
}