OBJ文件未出现在浏览器WebGL Three.js中

Question

我有一个obj文件，我想尝试使用Three.js进行Three.js 。 我一直在尝试从Web上获取尽可能多的有关如何实现此目标的信息，我的研究使我开始使用以下脚本，但是我所看到的只是黑屏，控制台中没有错误消息。

实际上，控制台中唯一的输出是来自LoaderManager ，似乎是在说对象已成功加载。 （见下文：）

LoadingManager输出：

THREE.WebGLRenderer 68 three.min.js:520
Loading: skin.jpg 1 2  app.html:42
Loading: ucd.obj 2 2   app.html:42

这是我的app.html文件：

            //Variables
            var container, stats;
            var camera, scene, renderer;
            var mouseX = 0, mouseY = 0;
            var windowHalfX = window.innerWidth/2;
            var windowHalfY = window.innerHeight/2;
            init();
            animate();

            //Initialisation
            function init(){
                container = document.createElement('div');
                document.body.appendChild(container);
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
                camera.position.z = 100;

                //scene
                scene = new THREE.Scene();

                //Light
                var ambient = new THREE.AmbientLight(0x101030);
                scene.add(ambient);

                var directionalLight = new THREE.DirectionalLight(0xffeedd);
                directionalLight.position.set(0,0,1);
                scene.add(directionalLight);

                //Texture
                var manager = new THREE.LoadingManager();
                manager.onProgress = function ( item, loaded, total ) {
                    console.log("Loading: " + item, loaded, total );
                };

                var texture = new THREE.Texture();
                var loader = new THREE.ImageLoader(manager);
                loader.load('skin.jpg', function(image){
                    texture.image = image;
                    texture.needsUpdate = true;
                });

                //Model
                var loader = new THREE.OBJLoader(manager);
                loader.load('ucd.obj', function(object){

                    object.traverse(function(child){
                            if(child instanceof THREE.Mesh){
                                child.material.map = texture;
                            }
                    }); 

                    object.position.y = -80;
                    scene.add(object);

                });

                //Renderer
                renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);


                //Event Listeners
                document.addEventListener('mousemove', onDocumentMouseMove, false);
                window.addEventListener('resize', onWindowResize, false);
            }

            function onWindowResize(){
                windowHalfX = window.innerWidth/2;
                windowHalfY = window.innerHeight/2;
                camera.aspect = window.innerWidth/window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }

            function onDocumentMouseMove(event){
                mouseX = (event.clientX - windowHalfX)/2;
                mouseY = (event.clientY - windowHalfY)/2;
            }

            //Animation
            function animate(){
                requestAnimationFrame(animate);
                render();
            }

            function render(){
                camera.position.x += (mouseX - camera.position.x) * .05;
                camera.position.y += (mouseY - camera.position.y) * .05;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
            }

基本上我的问题是，为什么上面的脚本甚至不将obj文件的轮廓输出到窗口。 我将不胜感激。

Answer 1

如果屏幕为黑色，而您看不到已加载的模型，则可以尝试以下几种操作：

1. 移动灯光的位置。 有时，光会在模型内部结束。 可以使用* LightHelper（）查看光源在哪里。
2. 删除所有纹理分配。 有时，如果纹理未正确加载，这就是失败的原因。
3. 如果您有纹理，请确保模型具有纹理（UV）坐标。
4. 缩小模型。 可能太大，相机在里面。
5. 移动相机。 通常，仅在一个轴上进行操作即可（选择z轴）。
6. 计算已加载模型的边界框（geometry.computeBoundingBox（）或THREE.BoundingBoxHelper（）），并尝试找出它是否不在屏幕上（通常在其中心不在0,0,0时）

Answer 2

.obj模型有多大？ 如果文件太大，则不会在浏览器中加载。 您可以尝试使用meshlab（ http://meshlab.sourceforge.net/ ）来减少模型的文件大小。 在shapeway的网站（ http://www.shapeways.com/tutorials/polygon_reduction_with_meshlab ）上有很好的教程。