Three.js中的自定义形状 [英] Custom shapes in Three.js

问题描述

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

如何创建自定义形状(不是球体、矩形等)？例如，如何创建半球体？

我当前的代码：

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

推荐答案

使用Three.js中的几何体有多种方式，从通过3D编辑器(如Blender，其优秀的Three.js exporter已经存在)导出模型到从头开始创建几何体。

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

我建议从现有的几何图形(在Extras/Geometry软件包中找到)开始，如THREE.CubeGeometry、THREE.CylinderGeometry、THREE.IcosahedronGeometry、THREE.OctahedronGeometry等)

此外，还有一些非常好的类允许您生成拉伸(THREE.ExtrudeGeometry)和车床(THREE.LatheGeometry)。有关拉伸的信息，请参阅this example。

您提到创建半个球体。这是使用车床几何的理想候选者。

您需要做的就是创建一个半圆路径(作为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);

这篇关于Three.js中的自定义形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！