Three.js 中的自定义形状

Question

在我的项目中，我创建的形状是球体，我使用图像作为材质的纹理...

如何制作自定义形状（不是球体、矩形等）？例如，如何创建半球？

我现在的代码：

// create a texture
texture = THREE.ImageUtils.loadTexture('red.png');

// create a sphere shape
geometry = new THREE.SphereGeometry(50, 16, 16);

// give it a shape red color
material = new THREE.MeshLambertMaterial({map: texture});

// create an object
mesh = new THREE.Mesh( geometry, material);

Answer 1

在 Three.js 中有多种使用几何的方法，从通过 3D 编辑器（例如 Blender，已经存在一个不错的 Three.js exporter）导出模型，到从头开始创建几何。

一种方法是创建 THREE.Geometry 的实例并添加顶点，然后计算它们如何连接以添加面索引，但这不是一个简单的方法。

我建议从现有的几何图形（在 extras/geometries 包中找到）开始，例如 THREE.CubeGeometry、THREE.CylinderGeometry、THREE.IcosahedronGeometry、THREE.OctahedronGeometry 等）

此外，还有一些非常不错的类可以让您生成挤压件 (THREE.ExtrudeGeometry) 和车床 (THREE.LatheGeometry)。对于挤压，请参阅this 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

将该几何图形插入您的网格中，Bob 就是您的叔叔！

或者，您可以使用 GeometryUtils 使网格/枢轴居中：

THREE.GeometryUtils.center(geometry);