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

【问题标题】：OBJ file not appearing in Browser WebGL Three.jsOBJ 文件未出现在浏览器 WebGL Three.js 中
【发布时间】：2014-08-12 20:18:01
【问题描述】：

我有一个obj 文件，我想尝试使用Three.js 加载它。我一直在尝试尽可能多地从网络上获取有关如何实现此目的的信息，并且我的研究使我使用了以下脚本，但我所看到的只是一个黑屏，控制台中没有错误消息。

事实上，控制台中唯一的输出来自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 文件的轮廓输出到窗口。如有任何帮助，我将不胜感激。

【问题讨论】：

尝试将您的灯光移动到 0,0,100。光线可能在您的物体内部。
我试过了，但不幸的是没有运气，物体甚至没有显示在屏幕上，更不用说灯光了。
你知道物体边界框的大小吗？
另一件要确保的事情是模型确实有 UV 坐标。要找出答案，请在 child.material.map = texture 行注释掉。
尝试缩小模型。

标签： javascript three.js sketchup

【解决方案1】：

如果您的屏幕是黑色的并且看不到加载的模型，您可以尝试以下几种方法：

移动灯的位置。有时光最终会进入模型内部。可以使用 *LightHelper() 来查看你的灯在哪里。
删除所有纹理分配。如果纹理加载不正确，有时这就是失败的原因。
如果您有纹理，请确保模型具有纹理 (UV) 坐标。
缩小模型。它可能太大了，相机在里面。
移动相机。通常只在一个轴上这样做就足够了（选择 z 轴）。
计算加载模型的边界框（geometry.computeBoundingBox() 或 THREE.BoundingBoxHelper()）并尝试判断它是否在屏幕外（通常当其中心不在 0,0,0 时）

【讨论】：

【解决方案2】：

您的 .obj 模型有多大？如果文件太大，浏览器将无法加载。您可以尝试使用 meshlab (http://meshlab.sourceforge.net/) 来减小模型的文件大小。 shapeway 的网站 (http://www.shapeways.com/tutorials/polygon_reduction_with_meshlab) 上有一个很好的教程来说明如何做到这一点。

【讨论】：