Three.js에서 늘리지 않고 텍스처를 반복하려면 어떻게해야합니까?

Question

내가하는 일과 상관없이, 텍스처가 적용되고있는 메시의 크기로 텍스처가 늘어나거나 크기가 조정 된 것처럼 보입니다. 이 질문에 대한 많은 답변을 읽었습니다. 해결책 중 어느 것도 나를 위해 고정 된 것으로 보이지 않으므로 새 질문을 게시하고 있습니다. 나는 웹 GL 렌더러 여기

을 사용하고

• 내 텍스처
  모두 64 × 64 픽셀이
• 내 모든 텍스처를 미리로드하고 있습니다 정보를 원하시면 그냥 조금, 내 코드
  입니다

  makeTestObject:function() 
  { 
      var scope = this, 
       tileGeometry = new THREE.BoxGeometry(TILE_SIZE , TILE_HEIGHT , TILE_SIZE), 
       texture = new THREE.Texture(preloadedImageObject), 
       textureMaterial = new THREE.MeshLambertMaterial({map:texture}), 
       tile = new THREE.Mesh(tileGeometry , new THREE.MeshFaceMaterial(
       [ 
        textureMaterial, // +x 
        textureMaterial, // -x 
        textureMaterial, // +y 
        textureMaterial, // -y 
        textureMaterial, // +z 
        textureMaterial // -z 
       ])); 
  
      texture.wrapS = THREE.RepeatWrapping; 
      texture.wrapT = THREE.RepeatWrapping; 
  
      tile.position.y = BASE_HEIGHT * 2; 
      tile.castShadow = true; 
      tile.receiveShadow = true; 
      texture.needsUpdate = true; 
      scope.scene.add(tile); 
  } 
  

  texture.repeat.set(x , x)을 입력하고 x을 아무 값으로 설정하면 텍스처가 사라지고 평평한 색으로 남았습니다.

  내가 뭘 잘못하고 있는지 알기!

Answer 1

표준 상자 형상 (정사각형 또는 직사각형)의 경우 해결책은 다음과 같습니다.

makeTestObject:function() 
{ 
    var scope = this, 
     tileGeometry = new THREE.BoxGeometry(TILE_SIZE , TILE_HEIGHT , TILE_SIZE), 
     texture = new THREE.Texture(preloadedImageObject), 
     textureMaterial = new THREE.MeshLambertMaterial({map:texture}), 
     tile = new THREE.Mesh(tileGeometry , new THREE.MeshFaceMaterial(
     [ 
      textureMaterial, // +x 
      textureMaterial, // -x 
      textureMaterial, // +y 
      textureMaterial, // -y 
      textureMaterial, // +z 
      textureMaterial // -z 
     ])); 

    texture.wrapS = THREE.RepeatWrapping; 
    texture.wrapT = THREE.RepeatWrapping; 
    tile.geometry.computeBoundingBox(); 

    var max = tile.geometry.boundingBox.max; 
    var min = tile.geometry.boundingBox.min; 
    var height = max.y - min.y; 
    var width = max.x - min.x; 

    texture.repeat.set(width/TEXTURE_SIZE , height/TEXTURE_SIZE); 

    texture.needsUpdate = true; 
    scope.scene.add(tile); 
} 

키 반복의 비율을 올바르게 설정하고 있습니다. 동일한 재질 오브젝트를 반복해서 참조하기보다는 각면에 대해 새 재질을 생성 할 수도 있습니다.