如何将纹理应用于脸部的一部分？

我想仅将纹理应用于立方体的面部的指定部分 - 而不是整个面部。我想多次对同一张脸进行此操作。例如，我想将texture1.jpg放在脸部的右上角，右下角的texture2.jpg，左上角的texture3.jpg以及中间的texture4.jpg。如何将纹理应用于脸部的一部分？

我希望能够做到这一点，而无需为每个部分创建新的网格。

我遇到了不得不为纹理的每个部分创建一个新网格的性能问题，并且如果我可以通过以某种方式将“贴花”放置在单个网格上，整个事情将会运行更平滑。

来源

2015-09-05 Dane Iracleous

我在不同的地方在画布上画了多幅图像，然后出口画布的URL，这是我加的纹理材料到网格：

var scene = new THREE.Scene(); 
    var sceneWidth = window.innerWidth; 
    var sceneHeight = window.innerHeight; 
    var camera = new THREE.PerspectiveCamera(45, sceneWidth/sceneHeight, 0.1, 3000); 
    var controls = new THREE.OrbitControls(camera); 

    var raycaster = new THREE.Raycaster(); 
    var renderer = new THREE.WebGLRenderer({ alpha: true }); 
    renderer.setClearColor(0xcccccc, 1); 
    renderer.setSize(sceneWidth, sceneHeight); 
    document.getElementById("content").appendChild(renderer.domElement); 

    var canvas = document.createElement('canvas'); 
    canvas.width = 200; 
    canvas.height = 900; 

    var ctx = canvas.getContext("2d"); 

    var imgs = []; 
    imgs.push(loadImage('http://uobot.com/demo/1.jpg', main)); 
    imgs.push(loadImage('http://uobot.com/demo/2.jpg', main)); 
    imgs.push(loadImage('http://uobot.com/demo/3.jpg', main)); 

    var imagesLoaded = 0; 

    function main() { 
    imagesLoaded ++; 
    if(imagesLoaded == imgs.length) { 
     for(var i in imgs) { 
      ctx.drawImage(imgs[i], 0, i*100); 
     } 

     var dataUrl = canvas.toDataURL(); 

     var texture = THREE.ImageUtils.loadTexture(dataUrl); 
     texture.needsUpdate = true; 
     texture.minFilter = THREE.LinearFilter; 
     var material = new THREE.MeshPhongMaterial({ 
      map: texture, 
      specular: 0x050505, 
      shininess: 0 
     }); 
     var object = new THREE.Mesh(new THREE.PlaneGeometry(10, 60, 1, 1), material); 
     scene.add(object); 
    } 
    } 

    function loadImage(src, onload) { 
    var img = new Image(); 

    img.onload = onload; 
    img.src = src; 

    return img; 
    }

来源

2015-09-05 11:36:05

您可以在自定义THREE.ShaderMAterial结合纹理：

<script id="cubeFragmentShader" type="x-shader/x-fragment"> 
     uniform vec2 aMin; 
     uniform vec2 aMax;  
     varying vec2 vUv; 
     uniform sampler2D texture; 
     uniform sampler2D texture2; 

     void main() { 
      vec2 position = vUv; 
      if (vUv.x<aMin.x || vUv.x>aMax.x || vUv.y<aMin.y || vUv.y>aMax.y) { 
       gl_FragColor = texture2D(texture2, position); 
      } else {  
       position -= aMin;  
       position.x /= aMax.x - aMin.x; 
       position.y /= aMax.y - aMin.y;  

       gl_FragColor = texture2D(texture, position); 
      }    

     } 
    </script>

http://jsfiddle.net/fj2r9b55/

来源

2015-09-05 06:53:01

我找不出如何使用此方法在同一个面上放置超过2张图像。 –

@DaneIracleous只需添加更多纹理：http://jsfiddle.net/fj2r9b55/1/ –

如何将纹理应用于脸部的一部分？

回答

相关问题