THREE.OBJLoader 无法显示obj文件？答案

【问题标题】：THREE.OBJLoader can not display obj file?THREE.OBJLoader 无法显示obj文件？
【发布时间】：2017-03-26 22:37:29
【问题描述】：

这是我的代码……我搜索了很多关于它的内容……但我找不到什么都不会显示的问题！也没有任何错误！如果你能帮助我，我也可以把我的文件发给你……谢谢

    <body>
    <script src="Three.js"></script>
    <script src="DDSLoader.js"></script>
    <script src="MTLLoader.js"></script>
    <script src="OBJLoader.js"></script>


    <script>
     // Setup a new scene
     var scene = new THREE.Scene();


     // Setup the camera
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    camera.position.z = 0;
    camera.position.x = 0;
    camera.position.y = 0;
     // Setup the renderer
     var renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);

     var onProgress = function ( xhr ) {
                        if ( xhr.lengthComputable ) {
                            var percentComplete = xhr.loaded / xhr.total * 100;
                            console.log( Math.round(percentComplete, 2) + '% downloaded' );
                        }
                    };
                    var onError = function ( xhr ) { };

                    THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath( 'obj/table/' );
    mtlLoader.load( 'table.mtl', function( materials ) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'obj/table/' );
    objLoader.load( 'table.obj', function ( object ) {
                object.position.x = 0;
                object.position.y = 0;
                object.position.z = 0;
                scene.add( object );
            }, onProgress, onError );
        });



     // Render loop to rotate our sphere by a little bit each frame
     var render = function () {
         renderer.setClearColor( 0xa9db8b );
       renderer.render(scene, camera);
     };

     render();
     </script>
<canvas width="1366" height="662" style="width: 1366px; height: 662px;"></canvas>
    </body>

【问题讨论】：

标签： three.js objloader

【解决方案1】：

作为一个选项：您在加载模型之前调用render()。

试试这个：

objLoader.load( 'table.obj', function ( object ) {
                object.position.x = 0;
                object.position.y = 0;
                object.position.z = 0;
                scene.add( object );
                render();  // call it in the callback function
            }, onProgress, onError );
        });

【讨论】：

我之前没叫过！
oooooooooooooooooooo ......我改变了它并underestaaaaaand你的意思是什么......谢谢你uuuuuu它有帮助
但为什么将它显示为没有任何纹理的黑色物体？

【解决方案2】：

您将对象放置在 (0,0,0) 处，并且将相机放置在同一位置。为您的相机尝试以下代码：

// Place camera on x-axis
camera.position.set(10,0,0);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(new THREE.Vector3(0,0,0));

【讨论】：