0

我有一个用 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>

`

4

2 回答 2

1

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

于 2013-10-26T00:37:52.217 回答
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 文件定义了纹理，它们的文件大小也可能相当大。

于 2013-08-19T21:36:02.830 回答