ConvexGeometry是 Three.js 中的一个几何体类,用于根据给定的顶点数组生成一个凸多面体。凸多面体是指任意两点之间的连线都位于物体内部的几何体。ConvexGeometry在需要创建由若干点构成的凸包几何体时非常有用,例如模拟自然物体或生成随机的多面体形状。还有地图顶点与贴图
DecalGeometry 是 Three.js 中用于将贴花(decal)应用到现有几何体表面的几何体类。贴花通常用于在 3D 模型表面添加细节,例如污渍、标志、伤痕等,而不会改变原始几何体的结构。DecalGeometry 会根据指定的贴花纹理、位置、方向和大小,在现有几何体表面生成一个新的几何体。
ParametricGeometry是 Three.js 中的一个几何体类,它用于生成基于参数方程的几何体。与标准的几何体(如球体、立方体等)不同,ParametricGeometry允许用户定义一个函数,这个函数通过参数来计算几何体的顶点和面。这个类非常适合生成一些复杂的形状,如螺旋、圆环或根据数学公式生成的其他表面。
TeapotGeometry是 Three.js 中的一个几何体类,用于生成一个茶壶的 3D 模型。这种几何体通常用于展示和测试,类似于经典的 3D 渲染中的 "teapot" 模型(即Utah Teapot),该模型广泛用于计算机图形学和渲染技术的研究和演示。
TextGeometry是 Three.js 中用于生成 3D 文本的几何体类。它允许你将文本字符串转化为 3D 模型,并可以应用纹理、颜色、材质等渲染效果。通常,TextGeometry结合FontLoader使用,从字体文件中加载字体,并使用该字体生成文本几何体。
ConvexGeometry
Constructor ConvexGeometry( points : Array ) points — 所得凸包中将包含的一组Vector3。
// 创建一个包含随机点的数组
const points = [];
for (let i = 0; i < 10; i++) {
points.push(new THREE.Vector3(
(Math.random() - 0.5) * 4, // X 坐标随机值
(Math.random() - 0.5) * 4, // Y 坐标随机值
(Math.random() - 0.5) * 4 // Z 坐标随机值
));
}
// 使用点创建 ConvexGeometry
const convexGeometry = new ConvexGeometry(points);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const convexMesh = new THREE.Mesh(convexGeometry, material);
scene.add(convexMesh);
// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
DecalGeometry 贴花几何体
Constructor DecalGeometry( mesh : Mesh, position : Vector3, orientation : Euler, size : Vector3 ) mesh — 一个网格对象。 position — 贴花投影器的位置。 orientation — 贴花投影器的朝向。 size — 贴花投影器的尺寸。
// 创建一个球体几何体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
// 创建一个贴花纹理
const decalTexture = new THREE.TextureLoader().load(imgPng); // 替换为你的纹理路径
// 计算贴花的位置和方向
const decalPosition = new THREE.Vector3(0, 0, 1); // 贴花中心位置
const decalNormal = new THREE.Vector3(0, 0, 1); // 贴花的法线方向
const decalSize = new THREE.Vector3(0.5, 0.5, 0.1); // 贴花的大小
// 创建 DecalGeometry
const decalGeometry = new DecalGeometry(sphere, decalPosition, decalNormal, decalSize);
// 使用 DecalGeometry 创建材质,并将贴花纹理应用到该材质
const decalMaterial = new THREE.MeshBasicMaterial({ map: decalTexture, depthTest: false, depthWrite: false, transparent: true });
const decalMesh = new THREE.Mesh(decalGeometry, decalMaterial);
scene.add(decalMesh);
// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
ParametricGeometry 参数化缓冲几何体 有一个属性
ParametricGeometry(func : Function, slices : Integer, stacks : Integer) func — 一个函数,它接受介于 0 和 1 之间的 u 和 v 值并修改第三个 Vector3 参数。 Default 是一个生成曲面的函数。 slices — 用于参数函数的切片计数。默认值为 8。 stacks — 用于参数函数的堆栈计数。默认值为 8。
// 定义生成球体的参数方程
function sphere(u, v, target) {
const radius = 1; // 球体半径
const phi = u * Math.PI; // 经度
const theta = v * 2 * Math.PI; // 纬度
// 球体的三维坐标
target.set(
radius * Math.sin(phi) * Math.cos(theta),
radius * Math.sin(phi) * Math.sin(theta),
radius * Math.cos(phi)
);
}
// 创建 ParametricGeometry,并传入球体的生成函数
const geometry = new ParametricGeometry(sphere, 50, 50);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const sphereMesh = new THREE.Mesh(geometry, material);
scene.add(sphereMesh);
属性
- parameters : Object 一个包含着构造函数中每个参数的对象。在对象实例化之后,对该属性的任何修改都不会改变这个几何体。
TeapotGeometry 通过 Martin Newell 的著名 Utah 茶壶数据库进行镶嵌。
TeapotGeometry(size : Integer, segments : Integer, bottom : Boolean, lid : Boolean, body : Boolean, fitLid : Boolean, blinn : Boolean)属性 size — 茶壶的相对尺寸。可选;默认为 50。 segments — 每个面片边缘细分的线段数。可选;默认为 10。 bottom — 是否生成茶壶底部。可选;默认为 true。 lid — 是否生成盖子。可选;默认为 true。 body — 是否生成壶身。可选;默认为 true。 fitLid — 是否稍微拉伸盖子以防止壶身和盖子之间的间隙。可选;默认为 true。 blinn — 是否垂直缩放茶壶以获得更好的外观。可选;默认为 true。
// size: 50:茶壶的大小为 50(相对尺寸)。
// segments: 12:茶壶的细节较为精细,每个面片的边缘细分为 12 个线段。
// bottom: true:茶壶有底部。
// lid: true:茶壶有盖子。
// body: true:茶壶有主体。
// fitLid: true:盖子稍微拉伸以适应茶壶主体。
// blinn: true:茶壶的形状会被垂直缩放以获得更好的外观。
// 创建茶壶几何体
const geometry = new TeapotGeometry(50, 12, true, true, true, true, true); // 自定义茶壶
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const teapot = new THREE.Mesh(geometry, material);
scene.add(teapot);
TextGeometry 文本缓冲几何体
TextGeometry(text : String, parameters : Object) text — 将要显示的文本。 parameters — 包含有下列参数的对象: font — THREE.Font的实例。 size — Float。字体大小,默认值为100。 depth — Float。挤出文本的厚度。默认值为50。 curveSegments — Integer。(表示文本的)曲线上点的数量。默认值为12。 bevelEnabled — Boolean。是否开启斜角,默认为false。 bevelThickness — Float。文本上斜角的深度,默认值为20。 bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。 bevelSegments — Integer。斜角的分段数。默认值为3。