无法使用three.js显示3D obj文件+纹理

Question

我尝试在网站上展示带有纹理的 3D 模型（使用 three.js 加载 .obj 和 .mtl 文件）。但是模型没有出现。我尝试打印出 obj，我得到了这个obj code。有谁知道发生了什么？控制台中不再有其他错误。屏幕显示为黑色底色，但没有模型。感谢您是否可以提供帮助。非常感谢

        let container, stats;

        let camera, cameraTarget, scene, renderer;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
            camera.position.set( 0, 0, 0 );

            cameraTarget = new THREE.Vector3( 0, 0, 0 );

            scene = new THREE.Scene();

            var OBJFile = '/program fixture.obj';
            var MTLFile = '/program fixture.mtl';
            const manager = new THREE.LoadingManager();
            manager.addHandler( /\.dds$/i, new DDSLoader() );
            
            new MTLLoader(manager).load(MTLFile, function ( materials ) {
                materials.preload();
                new OBJLoader ( manager ).setMaterials( materials ).load(OBJFile, function ( object ) {
                    console.log(object);
                    scene.add( object );
                });
            });
            

            camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
            scene.add(camera);

            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.outputEncoding = THREE.sRGBEncoding;

            renderer.shadowMap.enabled = true;
            
            container.appendChild( renderer.domElement );
            const controls = new OrbitControls(camera, renderer.domElement)
            controls.enableDamping = true
            controls.target.set(0, 1, 0)

            // stats

            stats = new Stats();
            container.appendChild( stats.dom );

            window.addEventListener( 'resize', onWindowResize );

        }


        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );
            render();
            stats.update();

        }

        function render() {

            camera.lookAt( cameraTarget );

            renderer.render( scene, camera );

        }

Answer 1

您的代码中存在一些问题。

• 您正在使用OrbitControls，但随后在动画循环中调用lookAt()。不要那样做。让OrbitControls 聚焦目标。
• 如果启用阻尼，则必须在动画循环中调用controls.update()。
• 不要将相机放在原点。相机可能在加载的资产“内部”，因此看不到它。同时增加相机的far 值。试试看：

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 100 );

• 还要为场景添加一些灯光，否则加载的资源会显示为黑色。试试看：

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
hemiLight.position.set( 0, 20, 0 );
.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( 0, 100, 100 );
scene.add( dirLight );