Question

我正在学习three.js并且我已经完成了一些示例和基本着色器（One being Codrop's "the aviator" tutorial），但是现在我很难尝试创建一个简单的一次有2个纹理的立方体。

我想为每个方块的脸部同时使用2个透明.png纹理。这是否可能不重复自定义着色器？ I already saw this answer，但由于它的复杂性并且对着色器来说是个新手，因此我无法正常工作。

对于上下文，我的代码在this example上几乎相同，只是一个带有纹理的简单3D立方体，我试图拥有2个不同的（在另一个上面）< / p>

Answer 1

在画布上动态绘制图像并将该画布设置为纹理。

function getCanvasImage() {

  var canvas = document.createElement('canvas');
  canvas.width  = 512;
  canvas.height = 512;
  var context = canvas.getContext('2d');
  var texture = new THREE.Texture(canvas) ;

  var imageObj = new Image();
  imageObj.src = "my_image1.png";
  imageObj.onload = function(){  
    context.drawImage(imageObj, 0, 0);
    texture.needsUpdate = true;
    var imgObj2 = new Image();
    imgObj2.src = "my_image2.png";
    imgObj2.onload = function(){
      context.drawImage(imgObj2, 0, 0);
      texture.needsUpdate = true;
    }
  };

  return texture;

}

material = new THREE.MeshBasicMaterial({map:getCanvasImage()});

这是fiddle

小提琴显示背景图案，覆盖有透明度的png。

请注意，我正在为返回dataURL的图像源调用函数。这只是为了解决角色问题。

修改
重新阅读你的问题，我不确定你想要什么。具体而言，＃14; 2个透明的.png纹理同时适用于每个方形脸部＆＃34;。你的意思是每张脸上都有不同的图像吗？如果是这样，那么我的答案对你没有帮助如果你的意思是你需要在WestLangly链接的答案中看到背景颜色，你可以在绘制图像之前绘制画布背景颜色。

当然......只需添加一个像WestLangley建议的自定义着色器，可能比仅仅为了创建纹理而更容易摆弄画布。

Answer 2

没有着色器，您可以尝试这样的事情：

var myMaterialA = new THREE.MeshBasicMaterial({map:myTextureA, depthWrite:false});
var myMeshA = new THREE.Mesh( new THREE.BoxGeometry(1,1,1) , myMaterialA );

var myMaterialB = new THREE.MeshBasicMaterial({map:myTextureB,transparent:true});
var myMeshB = myMeshA.clone();
var myMeshB.material = myMaterialB;

透明的第二种材料将迫使另一个立方体在第一个之后绘制。如果这两个一个接一个地发生，它可以产生预期的效果。

是否可以使用2个纹理（一个在另一个上面）作为材质而不使用自定义着色器？

2 个答案: