javascript - 在 Three.js 中加载 JSON 模型

Question

我一直在尝试使用 Three.js 显示 3D json 模型。我对 Three.js 相当陌生，并且已经尝试了我能想到的所有方法，但不知道还有什么可以尝试。

当前，当我尝试加载模型时，我收到一条错误消息:

Uncaught TypeError: Cannot read property 'visible' of undefinedr @ three.min.js:602r @ three.min.js:602render @ three.min.js:649render @ test.html:106animate @ test.html:100

我真的不知道从这里该去哪里。感谢您的帮助。

这是我的代码:

<script type="text/javascript">
            if (!Detector.webgl) Detector.addGetWebGLMessage();

            var SCREEN_WIDTH = window.innerWidth;
            var SCREEN_HEIGHT = window.innerHeight;
            var FLOOR = 0;

            var container;

            var camera, scene;
            var webglRenderer;

            var zmesh, geometry;

            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            document.addEventListener(
                'mousemove',
                onDocumentMouseMove,
                false
            );
            init();

            animate();

            // Renderer
            webglRenderer = new THREE.WebGLRenderer();
            webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            webglRenderer.domElement.style.position = 'relative';
            container.appendChild(webglRenderer.domElement);

            // Loader
            var loader = new THREE.JSONLoader(),
            callbackModel = function(geometry) {
                createScene(geometry, 90, FLOOR, -50, 105)
            };
            loader.load('can.js', callbackModel);




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

                // Camera
                camera = new THREE.PerspectiveCamera(
                    75,
                    SCREEN_WIDTH / SCREEN_HEIGHT,
                    1,
                    100000
                );
                camera.position.z = 75;

                // Scene
                scene = new THREE.Scene();

                // Lights
                var ambient = new THREE.AmbientLight(0xffffff);
                scene.add(ambient);

                // More lights
                var directionalLight = new THREE.DirectionalLight(0xffeedd);
                directionalLight.position.set(0, -70, 100).normalize();
                scene.add(directionalLight);                            
            }



            function createScene( geometry, x, y, z, b ) {
                zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
                zmesh.position.set( 0, 16, 0 );
                zmesh.scale.set( 1, 1, 1 );
                scene.add( zmesh );
            }

            function onDocumentMouseMove(event) {
                mouseX = (event.clientX - windowHalfX);
                mouseY = (event.clientY - windowHalfY);
            }

            function animate() {
                requestAnimationFrame(animate);
                render();
            }

            function render() {
                if(webglRenderer != undefined && zmesh != undefined) {
                    zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);
                    webglRenderer.render(scene, camera);
                    }
            }
        </script>

Answer 1

如果您的 JSON 文件包含 Material 信息，那么一个 materials 数组将传递给您的回调函数，您需要执行以下操作:

callbackModel = function( geometry, materials ) {
    // your code
};
...
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

否则，您需要定义自己的 Material 。例如，

zmesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xff000 } ) );

三.js r.77