在three.js中加载JSON模型

我一直在尝试使用three.js显示3D json模型。我对three.js相当陌生，并且尝试了所有我能想到的，但不知道其他任何尝试。在three.js中加载JSON模型

目前，当我尝试加载模型我得到一个错误，指出：

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>

来源

2016-06-11 Ryan - Llaver

使用非精缩版'three.js'，而不是'three.min.js'进行调试。 – WestLangley

很高兴知道。我会确保将来做到这一点。 –

如果你的JSON文件中包含的材料信息，然后materials阵列将被传递给你的回调函数，你需要这样做：

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

否则，你需要定义你自己的材料。例如，

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

three.js所r.77

来源

2016-06-11 23:49:44 WestLangley

确切的问题。非常感谢你。 –

在three.js中加载JSON模型

回答

相关问题