如何将纹理应用于 THREE.ExtrudeGeometry？

Posted 2023-02-27

【中文标题】如何将纹理应用于 THREE.ExtrudeGeometry？

【英文标题】：How to apply a texture to THREE.ExtrudeGeometry?

【发布时间】：2013-01-25 16:26:24

【问题描述】：

var arcShape = new THREE.Shape();
arcShape.moveTo( 50, 10 );
arcShape.absarc( 10, 10, 40, 0, Math.PI*2, false );

var map1 = new THREE.ImageUtils.loadTexture( 'moon.jpg' );
var geometry = new THREE.ExtrudeGeometry( arcShape, extrudeSettings );
var new3D = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial(  map: map1  ) );
new3D.receiveShadow = true;
obj3Dmassive.add( new3D );

纹理 (512x512)：http://f3.s.qip.ru/cMfvUhNj.png

结果：http://f3.s.qip.ru/cMfvUhNh.png

如何填充纹理图形？

【问题讨论】：

见***.com/questions/7919516/using-textures-in-three-js

@RachelGallen, ...THREE.ExtrudeGeometry.......

【参考方案1】：

如果您只有一条直线挤压路径，则可以将纹理应用到挤压形状，而无需自定义 UV 生成器。例如

var extrudeSettings = 
                bevelEnabled: false, 
                steps: 1,
                amount: 20, //extrusion depth, don't define an extrudePath
                material:0, //material index of the front and back face
                extrudeMaterial : 1 //material index of the side faces            
            ;

var geometry = shape.extrude(extrudeSettings);

var mesh = new THREE.Mesh(geometry, 
    new THREE.MeshFaceMaterial([materialFace, materialSide]));

这对于千篇一律的形状很方便。

【参考方案2】：

编辑：答案已过时。请参阅Extruding multiple polygons with multiple holes and texturing the combined shape。

---

你很幸运。您正在尝试做的事情已在以下示例中完成：

https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_uvs2.html

您必须指定自己的 UV 生成器函数。此示例向您展示了如何做到这一点。

请记住，这只是一个示例。它可能不正确 - 或者在您的情况下易于实施。