Three.js - отображение текстурной карты на части объекта

Question

Самый простой способ показать текстуру по центру/справа/слева от объекта 2d?

Я попытался сыграть со смещением и повторением текстуры, но мне не повезло, и я не могу найти ответ на него в любом месте.

плюс, я не пытался это:

 someButton.onClick(function() { 

      var geom = editor.selected.geometry; 
      var uvs = geom.faceVertexUvs[0]; 

      var face0 = uvs[0]; 
      face0[0] = new THREE.Vector2(0,1); 
      face0[1] = new THREE.Vector2(0,0.2); 
      face0[2] = new THREE.Vector2(0.5,1); 

      var face1 = uvs[1]; 
      face1[0] = new THREE.Vector2(0,0.2); 
      face1[1] = new THREE.Vector2(0.5,0.2); 
      face1[2] = new THREE.Vector2(0.5,1); 

      geom.uvsNeedUpdate = true; 

    }); 

снова, не повезло.

, например, если объект является 2d квадрат и я хочу, чтобы коала изображение, чтобы быть в центре, его нужно выглядеть следующим образом:

koala bear on center of square

я хочу, чтобы изменить положение текстуры динамически заранее спасибо

Answer 1

я наконец придумал хорошее решение, посмотрите, если это поможет:

someButton.onClick(function() { 

    var obj = editor.selected; 
    var width = obj.geometry.parameters.width; 
    var height = obj.geometry.parameters.height; 
    var geometry = new THREE.PlaneGeometry(width,height, 3, 3); 
    var material = obj.material; 

    material.map.wrapS = material.map.wrapT = THREE.RepeatWrapping; 
    material.map.repeat.x = material.map.repeat.y = 3; 

    var materials = []; 
    materials.push(material); 
    materials.push(new THREE.MeshBasicMaterial({})); 

    for (var i = 0; i < 18; i++) { 
     if (i == 8 || i == 9) geomtery.faces[i].materialIndex = 0; 
     else geomtery.faces[i].materialIndex = 1; 
    } 

    obj.geomtery = geomtery; 
    obj.material = new THREE.MeshFaceMaterial(materials); 
    editor.signals.materialChanged.dispatch(obj); 

});