javascript Three.js - 自定义形状？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8284233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js - Custom Shapes?
提问by BorisD
I am new to the three.js...so far came to a point where I can create shapes and scene & play with the camera view.
我是three.js的新手……到目前为止，我可以创建形状和场景并使用相机视图进行播放。
In my project the shapes I created are spheres and I used image as texture for material....
在我的项目中，我创建的形状是球体，我使用图像作为材质的纹理......
My question is how to make a custom shape (not sphere,rectangle...)? For example how can I create half sphere?
我的问题是如何制作自定义形状（不是球体、矩形......）？例如，我如何创建半球？
My code for now:
我现在的代码：
// create texture
texture = THREE.ImageUtils.loadTexture('red.png');
// create a sphere shape
geometry = new THREE.SphereGeometry( 50, 16, 16 );
// give a shape red color
material = new THREE.MeshLambertMaterial({map: texture});
// create an object
mesh = new THREE.Mesh( geometry, material );
回答by George Profenza
There are multiple ways to use geometry in three.js, from exporting models via a 3D editor (like Blender, for which a nice three.js exporteralready exists ), to creating geometry from scratch.
在 Three.js 中有多种使用几何的方法，从通过 3D 编辑器导出模型（如 Blender，已经存在一个很好的Three.js 导出器），到从头开始创建几何。
One way would by to create instance of THREE.Geometry and add vertices, then work out how those connect to add face indices, but this not an easy way to do it. I would suggest starting with the existing geometries(found in the extras/geometries package) like THREE.CubeGeometry,THREE.CylinderGeometry,THREE.IcosahedronGeometry,THREE.OctahedronGeometry, etc.)
一种方法是创建 THREE.Geometry 的实例并添加顶点，然后计算它们如何连接以添加面索引，但这不是一种简单的方法。我建议从现有的几何图形（在 extras/geometries 包中找到）开始，比如 THREE.CubeGeometry、THREE.CylinderGeometry、THREE.IcosahedronGeometry、THREE.OctahedronGeometry 等）
Additionally there are some really nice classes that allow you to generate extrusions(THREE.ExtrudeGeometry) and lathes(THREE.LatheGeometry). For extrusions see this example.
此外，还有一些非常好的类允许您生成挤压（THREE.ExtrudeGeometry）和车床（THREE.LatheGeometry）。对于挤压，请参见此示例。
You mentioned creating half a sphere. That's an ideal candidate for using LatheGeometry. All you need to do is create a half-circle path (as an array of Vector3 instances) and pass that to the lathe so it revolves the half-circle into 3D - a half sphere. Here's an example:
你提到创建半个球体。这是使用 LatheGeometry 的理想选择。您需要做的就是创建一个半圆路径（作为 Vector3 实例的数组）并将其传递给车床，以便将半圆旋转成 3D - 一个半球。下面是一个例子：
var pts = [];//points array - the path profile points will be stored here
var detail = .1;//half-circle detail - how many angle increments will be used to generate points
var radius = 200;//radius for half_sphere
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees)
pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z
geometry = new THREE.LatheGeometry( pts, 12 );//create the lathe with 12 radial repetitions of the profile
Plug that geometry into your mesh and Bob's you uncle!
将该几何体插入您的网格中，鲍勃就是您的叔叔！
Optionally you can centre the mesh/pivot using GeometryUtils:
您可以选择使用 GeometryUtils 使网格/枢轴居中：
THREE.GeometryUtils.center(geometry);
Have fun!
玩得开心！
