JSONモデルをthree.jsにロード

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ファイルは、材料の情報が含まれている場合、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