三.js - 将不同的材料应用于挤压形状 [英] three.js - apply different material to extruded shape

问题描述

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

I have Three.Shape which I can apply Extrusion To get a plane I drew a square first and then apply extrusion

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 方块.

now a 3D square is appearing on my browser.

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

Next I want to apply a image texture of 256x256 on its top face. How to do this?

推荐答案

如果你查看 THREE.js 中的 src/extras/geometries/ExtrudeGeometry.js 你会看到这些评论.

If you look at src/extras/geometries/ExtrudeGeometry.js in THREE.js you will see these comments.

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

所以比如你可以说(显然不会直接运行，因为它不完整)

So for example you can say (obviously won't run directly because it is incomplete)

// 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 种材质并将它们分配给您的网格.

And when you create your mesh you create 2 materials and assign them to your mesh.

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

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

Hope this gets you on the right path.

附带说明，与另一个答案相关，您想使用挤压来创建尺寸类似于正方形但具有斜角的东西.一个例子是，如果您尝试画骰子并希望将边缘变圆.

On a side note, related to the other answer, you make want to use extrude to create something that dimensionally is similar to a square but has bevels. One example would be if you were trying to draw dice and wanted to round the edges.

这篇关于三.js - 将不同的材料应用于挤压形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！