Three.js Application d'une texture répétée à un objet de scène JSON

Question

J'ai une scène json de base exportée de l'éditeur three.js/editor. Je veux ajouter une enveloppe de texture répétée à un objet dans cette scène mais je ne sais pas comment faire puisque les seuls exemples que j'ai trouvés ajoutent l'enveloppe dans la création de l'objet.

J'ai déjà essayé d'accéder à la texture et de lui donner un effet, mais je pense que je devrais ajouter une texture à l'objet du JavaScript puis déclarer la texture au lieu de l'ajouter à une texture déjà chargée.

<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

Vous devez définir les propriétés de bouclage et de répétition de la texture/carte et non du matériau. Docs également dire qu'il est important de définir needsUpdate à true, si les paramètres de retour ont changé. Et vous essayez de définir les propriétés avant que le json soit chargé (dans une boucle while?). Vous devriez le faire dans le rappel 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; 
    } 
});