动态文本或纹理在弯曲的对象上

Question

我是three.js的新手，我正在寻找可以实现这样效果的方法：

对于可乐可以像下图中的对象一样（减去浓缩），我想根据用户交互更改罐子表面上的独立文本位。文本的变体是相当随意的，对于预烘焙的完整纹理来说太多了。例如，我可能想：

• 将“Euro 2012”更改为任意文字
• 改变罐头背面的营养状况
• 显示或隐藏其中一个音乐笔记

我确信这是可能的，只是在寻找我需要采用的概念。在同一个对象上有多个纹理难吗？或者生成任意文本并将其放置在对象上并将其包装到对象的形状中？

任何指针都有帮助！

Answer 1

您可以将在单独画布中创建的图像用作Three.js纹理。我没有尝试在Three.js中混合和混合多个纹理（可能，但是很棘手和有限的控制），我认为最好的解决方案是在2D中创建动态纹理，完全由Three.js创建然后只应用完整纹理到了罐头。

您可以手动创建画布图像，也可以使用您选择的画布图像处理库（某些可能性：https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0）。或者您可以将模板作为SVG并修改（应该非常简单），将其渲染到画布，然后将其用作纹理。

使用canvas作为纹理非常简单：

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

  // drawing something here....

  context.font = "Bold 20px Helvetica";
  context.lineWidth = 4;
  context.strokeStyle = 'rgba(255,255,255,.8)';
  context.fillStyle = "rgba(0,0,0,1)";
  context.strokeText("Testing", 4, 22);
  context.fillText("Testing", 4, 22);    

var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;