2

我有一个平面几何网格，我使用 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 上的相同纹理的屏幕截图。注意五边形上的“拉伸”画布纹理，这不是我想要的。它应该按比例匹配。

拉伸画布纹理示例

4

1 回答 1

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

当网格是图像时：

在此处输入图像描述

将产生如下图像：

在此处输入图像描述

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

于 2013-09-03T21:27:08.083 回答