0

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

对于下图中的可乐罐对象（减去冷凝），我想根据用户交互更改罐子表面上的独立文本位。文本的变体相当随意，对于预烘焙的满​​罐纹理来说太多了。例如，我可能想要：

  • 将“Euro 2012”更改为任意文本
  • 更改罐头背面的营养统计数据
  • 显示或隐藏单个音符之一

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

任何指针都有帮助！

在此处输入图像描述

4

1 回答 1

2

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

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

使用画布作为纹理非常简单：

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;
于 2013-05-09T10:52:05.753 回答