小编Leo*_*Roe的帖子

Three.js 如何将多个面上的纹理映射到弯曲的自定义几何体上

我的目标是将矩形纹理映射到曲面上。我的自定义、挤压、形状、几何体的弯曲部分由总共 1800 个面中的 599 个面(​​Face4)组成。我试图将我的纹理分割到这 599 个曲面上。

图 1:我的自定义几何体的黑色面是我想要将纹理映射到的弯曲部分

图 1:我的自定义几何体的黑色面是我想要将纹理映射到的弯曲部分

图 2:我正在尝试做的事情的粗略示例

图 2:我正在尝试做的事情的粗略示例

图 3:每个面都是一个垂直站立的矩形: faces[ i ].color.setHex( Math.random() * 0xffffff );

IMage 3:每个面都是一个垂直站立的矩形: faces[ i ].color.setHex( Math.random() * 0xffffff );

尝试获取所选面的 UV 坐标(每个面如图像 3 所示)并旨在通过将纹理分割到这些曲面上来映射我的纹理。这是我到目前为止得到的:

var image = 'resources/customRectangle.png';
var texture = THREE.ImageUtils.loadTexture( image );
    texture.repeat.set(0.1, 0.1);                                           
    texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;;          

var settings = {
    amount: 14.5,
    steps : 1,
    bevelEnabled: false,
    curveSegments: 300,
    material: 0,
    extrudeMaterial: 1
    };

 var shape = new THREE.Shape();
     shape.moveTo( 90, 120 );
     shape.absarc( -30, -30, 200, 0, Math.PI * 0.27, false );
     shape.moveTo( …
Run Code Online (Sandbox Code Playgroud)

javascript three.js

5
推荐指数
0
解决办法
966
查看次数

标签 统计

javascript ×1

three.js ×1