是否可以在不使用自定义着色器的情况下使用 2 个纹理(一个在另一个之上)作为材质?

问题描述

我正在学习three.js，我已经做了一些关于它和基本着色器的例子(一个是 Codrop 的飞行员"教程)，但现在我很难尝试一次创建一个带有 2 个纹理的简单立方体.

I'm learning three.js and I've done a few a examples on it and basic shaders (One being Codrop's "the aviator" tutorial), but right now I'm stumped trying to create a simple cube with 2 textures at once.

我想为每个正方形的脸同时使用 2 个透明的 .png 纹理.这可能不会重复使用自定义着色器吗?我已经看到了这个答案，但是我没有成功让它正常工作，因为它很复杂并且对着色器来说相当陌生.

I would like to use 2 transparent .png textures at the same time for each of the square's face. Is this possible without recurring to custom shaders? I already saw this answer, but I've had no success getting it to work correctly because of it's complexity and being rather new to shaders.

就上下文而言，我在这个示例上的代码几乎相同，只是一个简单的 3D带有纹理的立方体，我正在尝试使用 2 个不同的(在另一个之上)

For context, my code is pretty much the same on this example, just a simple 3D cube with a texture, which I'm trying to have 2 different ones (on on top of the other)

推荐答案

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

Dynamically draw the images on a canvas and set that canvas as the texture.

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()});

这是一个小提琴

小提琴显示了一个背景图案，上面覆盖着一个透明的 png.

The fiddle shows a background pattern, overlayed with a png with transparency.

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

Notice in the fiddle I am calling function for the image sources that return a dataURL. This is just to get around the cors issue.

重新阅读您的问题后，我不确定您想要什么.特别是每个正方形的脸同时有 2 个透明的 .png 纹理".你的意思是每张脸都有不同的图像吗?如果是这样，那么我的回答对您没有帮助.
如果您的意思是像 WestLangly 链接到的答案中那样需要背景颜色可见，您可以在画布上绘制图像之前先绘制画布背景颜色.

Having re read your question, I'm not exactly sure what you want. Specifically "2 transparent .png textures at the same time for each of the square's face". Do you mean a different image on each face? If so, then my answer will not help you.
If you mean that you need the background color to be visible as in the answer WestLangly linked to, you could possibly paint the canvas background color before drawing the images on it.

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

Of course... Just adding a custom shader like WestLangley suggests is probably easier than fiddling around with canvas just to create a texture.

这篇关于是否可以在不使用自定义着色器的情况下使用 2 个纹理(一个在另一个之上)作为材质?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！