Three.js將重複紋理應用於JSON場景對象

Question

我有一個從three.js/editor導出的基本json場景。我想添加一個重複的紋理包裝到這個場景中的一個對象，但我不知道該怎麼做，因爲我發現的唯一例子是在創建對象時添加了包裝。

我已經嘗試訪問紋理並給它一個換行，但我想我可能需要從JavaScript添加紋理到對象，然後聲明紋理換行而不是嘗試將其添加到已加載的紋理。

<script> 
    var camera, scene, renderer; 
    var mesh; 
    init(); 
    animate(); 
    function init() { 
     camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
     camera.position.z = 400; 
     scene = new THREE.Scene(); 

     var objectLoader = new THREE.ObjectLoader(); 

     objectLoader.load("models/cube.json", function (obj) { 

      scene.add(obj) 

      obj.traverse(function(child) { 
       if (child instanceof THREE.Mesh) { 
        child.castShadow = true; 
        child.receiveShadow = true; 
       } 
      }); 

       obj.name = "cube"; 
       obj.position.set(0,0,0); 
       obj.scale.set(200,200,200); 
      }); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 
      // 
      window.addEventListener('resize', onWindowResize, false); 

      while (scene.getObjectByName('Box 1')){ 
       var texture = scene.getObjectByName('Box 1').material; 
       texture.wrapS = THREE.RepeatWrapping; 
       texture.wrapT = THREE.RepeatWrapping; 
       texture.repeat.set(2, 2); 
      } 
     } 
     function onWindowResize() { 
      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
     } 
     function animate() { 
      requestAnimationFrame(animate); 

      if (scene.getObjectByName('Box 1') ){ 
       scene.getObjectByName('Box 1').material.map.offset.x += 0.001; 
      }   
      renderer.render(scene, camera); 
     } 
</script> 

Answer 1

您需要設置紋理/貼圖的包裝和重複屬性，而不是材質。 Docs還表示，如果換行設置更改，則將needsUpdate設置爲true非常重要。你正試圖在json加載之前設置屬性（在while循環中？）。您應該在load回撥中執行此操作。

objectLoader.load("models/cube.json", function (obj) { 

    scene.add(obj) 

    obj.traverse(function(child) { 
     if (child instanceof THREE.Mesh) { 
      child.castShadow = true; 
      child.receiveShadow = true; 
     } 
    }); 

    obj.name = "cube"; 
    obj.position.set(0,0,0); 
    obj.scale.set(200,200,200); 

    var box1 = scene.getObjectByName('Box 1'); 
    if (box1) { 
     var texture = box1.material.map; 
     texture.wrapS = THREE.RepeatWrapping; 
     texture.wrapT = THREE.RepeatWrapping; 
     texture.repeat.set(2, 2); 
     texture.needsUpdate = true; 
    } 
});