three.js - 将不同的材料应用于挤压形状答案

【问题标题】：three.js - apply different material to extruded shapethree.js - 将不同的材料应用于挤压形状
【发布时间】：2015-01-28 01:20:31
【问题描述】：

我有可以应用挤压的 Three.Shape 为了得到一个平面，我先画了一个正方形，然后应用挤压

var squareShape = new THREE.Shape();
squareShape.moveTo( 0,0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
squareShape.lineTo( sqLength, 0 );
squareShape.lineTo( 0, 0 );

var geometry = new THREE.ExtrudeGeometry( squareShape,extrudeSettings);

现在我的浏览器上出现了一个 3D 正方形。

接下来我想在其顶面上应用 256x256 的图像纹理。如何做到这一点？

【问题讨论】：

标签： three.js webgl

【解决方案1】：

如果您查看 THREE.js 中的 src/extras/geometries/ExtrudeGeometry.js，您会看到这些 cmets。

material: // 正面和背面的材料索引
extrudeMaterial: // 挤出和斜面的材料索引

所以例如你可以说（显然不会直接运行，因为它不完整）

// The face material will be index #0.  The extrusion (sides) will be #1.
var extrudeSettings = { amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1 };

当您创建网格时，您会创建 2 种材质并将它们分配给您的网格。

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );

希望这能让你走上正确的道路。

在旁注中，与另一个答案相关，您想使用挤压来创建尺寸类似于正方形但有斜面的东西。一个示例是，如果您尝试绘制骰子并希望将边缘弄圆。

【讨论】：

【解决方案2】：

如果你只想要一个立方体，你为什么要挤压？为什么不使用 CubeGeometry。

【讨论】：