Three.js：運行時無法使用r59更新運行時紋理貼圖

我使用畫布渲染器和Three.js的r59創建了一個多維數據集。立方體在不同的面上有不同的紋理。這呈現好了。我也可以TWEEN這個立方體的位置和旋轉，所以沒關係。Three.js：運行時無法使用r59更新運行時紋理貼圖

以下是我想要做的事情： A）立方體的正面有一個圖像紋理。 B）我把這個立方體移出相機的視野。 C）我改變了立方體上的圖像紋理。 D）我將立方體移回其原始座標，以便它再次變爲可見。

到目前爲止，步驟A，B和D正在工作。但是當我嘗試執行步驟C時，它停止工作。下面是相關的代碼部分...

<body> 
    <script src="build/three.min.js"></script> 
    <script src="js/libs/tween.min.js"></script> 
    <script> 
     var container; 
     var camera, scene, renderer, group, particle; 
     var cubeMesh; 
     var MatCollection = []; 
     var Materials = []; 

     init(); 
     animate(); 

     function init() { 
      container = document.createElement('div'); 
      document.body.appendChild(container); 
      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 3000); 
      camera.position.z = 1000; 
      scene = new THREE.Scene(); 

      var cubeGeometry = new THREE.CubeGeometry(800, 600, 30, 8, 8, 8); 
      cubeGeometry.dynamic = true; 

      // creating three textures 

      var neheTextureSMALL = new THREE.ImageUtils.loadTexture("test3.jpg"); 
      var neheTextureBIG1 = new THREE.ImageUtils.loadTexture("break01.jpg"); 
      var neheTextureBIG2 = new THREE.ImageUtils.loadTexture("break02.jpg"); 


      // putting two different sets of Materials to a material collection array 

      Materials = [ 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureBIG1, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureSMALL, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureSMALL, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureSMALL, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureBIG1, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureBIG1, 
        side: THREE.DoubleSide 
       }) 
      ]; 

      MatCollection.push(Materials); 

      Materials = [ 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureBIG2, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureSMALL, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureSMALL, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureSMALL, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureBIG2, 
        side: THREE.DoubleSide 
       }), 
       new THREE.MeshBasicMaterial({ 
        map:neheTextureBIG2, 
        side: THREE.DoubleSide 
       }) 
      ]; 

      MatCollection.push(Materials); 
      cubeMesh = new THREE.Mesh(cubeGeometry, new THREE.MeshFaceMaterial(MatCollection[0])); 
      cubeMesh.dynamic = true; 
      cubeMesh.position.set(0, 0, 500); 

      // Applying the first set of materials on cubeMesh creation works good 

      renderer = new THREE.CanvasRenderer(); 
      renderer.setClearColor(0x000000, 1); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 
     } 
     function animate() { 
      requestAnimationFrame(animate); 
      render(); 
     } 
     function render() { 
      TWEEN.update(); 
      camera.lookAt(scene.position); 

      // rotate the cube - dropped value manipulation 

      cubeMesh.rotation.set(xRotation, yRotation, zRotation); 

      renderer.render(scene, camera); 
     } 

     // this is NOT WORKING 

     function changetexture() { 
      currentMat++; 
      if (currentMat >= MatCollection.length) { 
       currentMat = 0; 
      } 
      cubeMesh.material = MatCollection[currentMat]; 
      cubeMesh.material.needsUpdate = true; 

     } 
    </script> 
</body>

在我的項目，我做了很多補間（移動和旋轉大量的對象）和我打電話從那裏changetexture（）...

當離開了線......

  cubeMesh.material = MatCollection[currentMat];

從功能，一切工作正常。立方體移出並返回顯示總是相同紋理的視圖。

我應該改變什麼？

非常感謝您分享您的專業知識。

奧利弗

來源

2013-07-31 Oli R.

完成。

我沒有嘗試將材質預加載到材質數組中，而是創建了一個名爲MyTextures的單獨紋理數組，並將新創建的材質（使用MyTextures數組中的紋理）應用到立方體網格的每一側。

... 
     var MyTextures = []; 
    ... then, in the init() function: 
      neheTextureSMALL = new THREE.ImageUtils.loadTexture("test3.jpg"); 
      MyTextures.push(neheTextureSMALL); 

      for (var myy = 0; myy<imgNameArray.length;myy++) { 
       neheTexture = new THREE.ImageUtils.loadTexture(imgNameArray[myy]); 
       MyTextures.push(neheTexture); 
      } 

    ... then in the changetexture() function: 

      cubeMesh.material.materials[0] = new THREE.MeshBasicMaterial({map: MyTextures[currentMat+1], side: THREE.DoubleSide }); 
      cubeMesh.material.materials[1] = new THREE.MeshBasicMaterial({map: MyTextures[0], side: THREE.DoubleSide }); 
      cubeMesh.material.materials[2] = new THREE.MeshBasicMaterial({map: MyTextures[0], side: THREE.DoubleSide }); 
      cubeMesh.material.materials[3] = new THREE.MeshBasicMaterial({map: MyTextures[0], side: THREE.DoubleSide }); 
      cubeMesh.material.materials[4] = new THREE.MeshBasicMaterial({map: MyTextures[currentMat+1], side: THREE.DoubleSide }); 
      cubeMesh.material.materials[5] = new THREE.MeshBasicMaterial({map: MyTextures[currentMat+1], side: THREE.DoubleSide });

這工作得很好。但它看起來不太好（圖像似乎分裂成許多三角形，這是另一個問題......）。 :-(

來源

2013-08-02 09:33:53

Three.js：運行時無法使用r59更新運行時紋理貼圖

回答

相關問題