Question

我有一个在Blender中制作的椅子的3D对象，并导出为.obj和.mtl。首先，加载时间是一个可怕的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>

`

Answer 1

@GuyGood在我的情况下对于长时间加载是正确的。我使用python simplehttpserver并切换到节点服务器，没有更慢的纹理加载问题。查看threejs wiki以获取其他本地服务器选项。

Answer 2

嗯，我猜你要定义一个灰色的MeshBasicMaterial用于你的obj，而不是使用加载器为你创建的材质。只需使用它。 “对象”应该具有mtl文件中定义的材料。

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

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

三个JS加载时间和纹理渲染问题

2 个答案: