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

素材ではなく、テクスチャ/マップのラップとリピートのプロパティを設定する必要があります。また、ラップ設定が変更された場合、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; 
    } 
});