问题描述
我有可以应用挤压的 Three.Shape为了得到一个平面,我先画了一个正方形,然后应用挤压
I have Three.Shape which I can apply ExtrusionTo 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 - 将不同的材料应用于挤压形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!