Question

我尝试使用three.js obj / mtl加载器，但它并不总是呈现正确。

在sarafi中，它的工作正确，但在chrome / firefox中渲染为黑色。

我的环境：

操作系统：OSX Darwin内核版本16.3.0 Chrome：56.0.2924.87（64位） Safari：10.0.2（12602.3.12.0.1）

我启动本地服务器使用 http://localhost/threejs_demo.html 访问html文件。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="three.js/build/three.js"></script>
    <script type="text/javascript" src="three.js/examples/js/loaders/OBJLoader.js"></script>
    <script type="text/javascript" src="three.js/examples/js/loaders/MTLLoader.js"></script>

    <script type="text/javascript">
        function init() {

            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0xFFFFFF); // black

            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(40, 400 / 300, 1, 1000);
            camera.position.set(150, 150, 150);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);

            var mtlLoader = new THREE.MTLLoader();
            var mesh = null;
            mtlLoader.setPath( 'js/Vanille/' );
            mtlLoader.load('vanille_obj.mtl', function(materials) {
                materials.preload();
                setTimeout(function () {
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setPath( 'js/Vanille/' );
                    objLoader.setMaterials(materials);
                    objLoader.load('vanille_obj.obj', function ( object ) {
                        mesh = object;
                        scene.add(object);
                    });
                },1000);
            });

            var light = new THREE.AmbientLight(0xffffff);
            scene.add(light);

            function draw() {
                if (mesh) {
                    mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
                }
                renderer.render(scene, camera);
            }

            setInterval(draw, 20);
        }
    </script>
</head>

<body onload="init()">
<canvas id="mainCanvas" width="800px" height="600px"></canvas>
</body>
</html>

在chrome / firefox中渲染结果

render result in chrome/firefox

在safari中渲染结果

render result in safari

three.js obj / mtl在safari中工作，但在chrome / firefox中不起作用

0 个答案: