ThreeJS 加载时间和纹理渲染问题答案

【问题标题】：ThreeJS load time and texture rendering problemsThreeJS 加载时间和纹理渲染问题
【发布时间】：2013-08-21 18:05:57
【问题描述】：

我有一个用 Blender 制作并导出为 .obj 和 .mtl 的椅子的 3D 对象。首先，加载时间是可怕的 40 多秒；我不知道为什么（可能是 Visual Studio？）其次，图像纹理没有正确加载。在没有环境或定向照明的情况下，我得到了一个剪影。通过照明，我得到了一点灰色的暗示，以提供一点深度，但与原始物体中的许多颜色没有什么相似之处。我现在只使用 ThreeJS 几天，所以我对它很陌生。因此，我不知所措。我已经阅读了几篇与我的问题相关的文章，但似乎都没有解决问题。我什至向 Blender 添加了一个插件以导出到 .js。我什至无法正确加载它（我认为这与我从 .OBJMTLLoader 和 .JSONLoader 不支持或需要的内容相同的事实有关；我只是不熟悉知道了就够了）。有什么想法/建议吗？这是我的脚本：

    <script src="js/three.min.js"></script>

    <script src="js/controls/TrackballControls.js"></script>

    <script src="js/loaders/MTLLoader.js"></script>
    <script src="js/loaders/OBJMTLLoader.js"></script>

    <script src="js/Detector.js"></script>

    <script>

        if (!Detector.webgl) Detector.addGetWebGLMessage();

        var container;

        var camera, controls, scene, renderer;

        init();
        animate();

        function init() {

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

            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.01, 1e10);
            camera.position.z = 2;

            //controls
            controls = new THREE.TrackballControls(camera);

            controls.rotateSpeed = 5.0;
            controls.zoomSpeed = 5;
            controls.panSpeed = 2;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            scene = new THREE.Scene();
            scene.add(camera);

            //lights
            var ambient = new THREE.AmbientLight(0xCCCCCC);
            scene.add(ambient);

            var directionalLight = new THREE.DirectionalLight(0xCCCCCC);
            directionalLight.position.set(0, 0, 2).normalize();
            scene.add(directionalLight);

            //main img
            var material = new THREE.MeshBasicMaterial({ color: '0xCCCCCC' });

            var loader = new THREE.OBJMTLLoader();
            loader.addEventListener('load', function (event) {

                var geometry = event.content;
                //var mesh = new THREE.Mesh(geometry);

                scene.add(geometry, material);

            });
            loader.load('chair.obj', 'chair.mtl');


            // renderer
            renderer = new THREE.WebGLRenderer({ antialias: false });
            renderer.setSize(window.innerWidth, window.innerHeight);

            container.appendChild(renderer.domElement);

            //

            window.addEventListener('resize', onWindowResize, false);

        }


        function onWindowResize() {

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

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

            controls.handleResize();

        }

        function animate() {

            requestAnimationFrame(animate);

            render();

            controls.update();

        }

        function render() {

            var timer = Date.now() * 0.0005;

            renderer.render(scene, camera);

        }

    </script>

【问题讨论】：

我一直在使用 three.js 编辑器，发现环境光也对我的事业没有帮助。我把它拿出来了，但它仍然是一个剪影物体。

标签： html json canvas three.js webgl

【解决方案1】：

好吧，我猜你正在定义一个灰色的 MeshBasicMaterial 来与你的 obj 一起使用，而不是使用加载器将为你创建的材质。就用这个。 “对象”应该具有在您的 mtl 文件中定义的材料。

loader.addEventListener( 'load', function ( event ) {
var object = event.content;
scene.add( object );
});             
loader.load( 'chair.obj', 'chair.mtl' );

关于您的加载时间：可能是您的本地服务器。另外，请注意 obj 文件格式在原始 ascii 格式中非常大。此外，如果 mtl 文件定义了纹理，它们的文件大小也可能相当大。

【讨论】：

我在有和没有网格的情况下都试过了，它没有任何区别。图像仍然是黑色的。我也尝试将文件用作 JSON，但我的 addEventListener 出现错误。
postimg.org/image/oy5vplebl" > postimg.org/image/pysz917k7" > 第一张图片是一把椅子，看起来和搅拌机中的椅子完全一样，没有纹理。但是，显然，第二个不会渲染纹理。除了文件之外，代码保持不变。
好吧，它是否找到了纹理，您是否收到任何控制台错误？至少看起来 obj 文件被加载了。
没有任何控制台错误。我怎么知道它是否找到纹理？会不会和我的定向灯有关？这是我目前正在使用的：var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0, 0, 1).normalize(); scene.add(directionalLight);
也许可以创建一个 jsFiddle？这会有所帮助还是尝试将其更改为具有适当参数和更远位置的聚光灯？顺便说一句：标准化 Vec3(0,0,1) 将导致 (0,0,1)，因此您可以保存 normalize()。

【解决方案2】：

@GuyGood 在我的情况下是正确的，因为加载时间很长。我正在使用 python simplehttpserver 并切换到节点服务器，并且不再出现缓慢的纹理加载问题。查看threejs wiki 了解其他本地服务器选项。

【讨论】：