Three.js中的自定义形状

Question

Three.js中的自定义形状

7

在我的项目中，我创建的形状是球体，并且我使用了一张图片作为材质...

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

目前我的代码：

// 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);

- BorisD

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George Profenza · Accepted Answer

在Three.js中，有多种使用几何图形的方法，从通过3D编辑器（例如Blender）导出的模型（导入模型）到从头开始创建几何图形。

其中一种方法是创建THREE.Geometry的实例，并添加顶点，然后确定这些顶点如何连接以添加面索引，但这不是一种简单的方法。

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

此外，还有一些非常好的类可以让您生成挤压体（THREE.ExtrudeGeometry）和车削体（THREE.LatheGeometry）。关于挤压体，请参阅此示例。

您提到要创建半个球。使用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

将这个几何形状插入到你的网格中，就完成了！

可选择地，你可以使用GeometryUtils将网格/轴心居中。

THREE.GeometryUtils.center(geometry);