Question

我有一个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文件的轮廓输出到窗口。我很感激任何帮助。

Answer 1

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

移动灯光的位置。有时光会在模型内部结束。可以使用* LightHelper（）来查看灯光的位置。
删除所有纹理指定。如果纹理没有正确加载，有时这就是失败。
如果您有纹理，请确保模型具有纹理（UV）坐标。
缩小模型。它可能太大而且相机在里面。
移动相机。通常只需在一个轴上（选择z轴）就足够了。
计算加载模型的边界框（geometry.computeBoundingBox（）或THREE.BoundingBoxHelper（））并尝试确定它是否在屏幕外（通常当它的中心不在0,0,0时）< / LI>

Answer 2

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

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

2 个答案: