如何在不是矩形的3D多边形面上使用Canvas纹理

Question

我有一个平面几何体的网格物体，我使用2D画布元素进行纹理处理。这很完美。

var landTexture = new THREE.Texture(land.canvas);  // animated canvas element
var material = new THREE.MeshLambertMaterial({map: landTexture});
var plane = new THREE.Mesh( new THREE.PlaneGeometry( this.land_width, this.land_height ), material );
landTexture.needsUpdate = true;
landObject.add(plane);

2D画布有一个动画图案，我想用它作为五边形而不是平面的纹理。如何对更复杂的多边形进行纹理处理，例如五角形，带有2D画布纹理？

编辑：我如何生成五角大楼

var pentagon = new THREE.Mesh( new THREE.CircleGeometry(this.land_width, 5), material );

PlaneGeometry上的动画纹理和具有5个边的CircleGeometry上的相同纹理的屏幕截图。请注意五边形上的“拉伸”画布纹理，这不是我想要的。它应该按比例适合。

Answer 1

我认为已经设置了UV，以便代码如：

var grid = new THREE.ImageUtils.loadTexture( 'images/uvgrid01.jpg' );
var pentagon = new THREE.Mesh( new THREE.CircleGeometry(50, 5), new THREE.MeshBasicMaterial({map:grid}) );

当网格是图像时：

将生成如下图像：

这就是你要找的东西吗？然后剩下的就是重复更新纹理，每次完成后，设置标志以更新材质。我可以详细介绍，但我需要知道画布是如何动画的。