云南网站建设选天软企业网站推广技巧
代码仓
GitHub - TiffanyHoo/three_practices: Learning three.js together!
可自行clone，无需安装依赖，直接liver-server运行/直接打开chapter01中的html文件
运行效果图
知识要点
在Three.js中，常用几何体可分为基础形状、参数化几何体和特殊类型：
一、基础几何体（Primitive Geometries）
1. 立方体（BoxGeometry）
• 特点：六面体，可定义长、宽、高及分段数。
• 应用：搭建建筑、箱子等基础模型。
• 示例：new THREE.BoxGeometry(1, 1, 1)（1x1x1的立方体）。
2. 球体（SphereGeometry）
• 特点：完整球体或半球，通过phiStart/phiLength控制弧度。
• 应用：地球、星球、球类模型。
• 示例：new THREE.SphereGeometry(5, 32, 32)（半径5，经纬分段各32）。
3. 圆柱体（CylinderGeometry）
• 特点：可定义上下底面半径、高度及分段，支持开口（如管道）。
• 应用：柱子、管道、笔筒等。
• 示例：new THREE.CylinderGeometry(1, 1, 5, 32)（上下半径1，高5，圆周分段32）。
二、参数化几何体（Parametric Geometries）
1. 平面（PlaneGeometry）
• 特点：二维平面，可定义宽高及分段，常用于地面、墙面或纹理贴图载体。
• 应用：地面、UI面板、水面（配合材质动画）。
• 示例：new THREE.PlaneGeometry(10, 10, 1, 1)（10x10平面，无分段）。
2. 圆环（TorusGeometry）
• 特点：环形几何体，由两个半径（环半径和管道半径）控制形状。
• 应用：手环、轮胎、环形装饰。
• 示例：new THREE.TorusGeometry(3, 1, 16, 32)（环半径3，管道半径1，分段数16和32）。
3. 圆锥（ConeGeometry）
• 特点：底面为圆形，顶部汇聚为点，可定义高度和底面半径。
• 应用：冰淇淋、金字塔、锥形物体。
• 示例：new THREE.ConeGeometry(2, 5, 32)（底面半径2，高5，圆周分段32）。
三、特殊几何体（Special Geometries）
1. 多面体（IcosahedronGeometry）
• 特点：正多面体（如二十面体），通过radius和detail（细分层级）控制精度。
• 应用：低多边形风格模型、抽象艺术造型。
2. 文本几何体（TextGeometry）
• 依赖：需引入THREE.TextGeometry和字体文件（如JSON格式字体）。
• 应用：3D文字标题、UI文字特效。
• 示例：
const textGeometry = new THREE.TextGeometry('Hello', {
font: 'Arial', size: 1, height: 0.1, curveSegments: 12
});
3. 挤出几何体（ExtrudeGeometry）
• 特点：沿二维路径（如线段、曲线）挤出三维形状，需配合Shape对象使用。
• 应用：复杂轮廓的三维模型（如LOGO、雕花）。
核心运行代码
// create a cylinder
var cylinderGeometry = new THREE.CylinderGeometry(1, 1, 5, 32); // 圆柱体（CylinderGeometry）
var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);// position the cylinder
cylinder.position.x = 10;
cylinder.position.y = 0;
cylinder.position.z = 0;// add the cylinder to the scene
scene.add(cylinder);// ……可根据需求调整几何体……参考官网：three.js docs