Three.js 几何体类型效果 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

使用 Three.js 创建多种类型的几何体，包括立方体、球体、圆柱、平面和圆形。

🖼️ 效果预览

🎮 案例演示

立即体验

效果描述

这是一个展示如何创建多种类型几何体的示例，包括常见的 3D 几何体类型。

效果特性

立方体：BoxGeometry 创建立方体
球体：SphereGeometry 创建球体
圆柱：CylinderGeometry 创建圆柱
矩形平面：PlaneGeometry 创建矩形平面
圆形平面：CircleGeometry 创建圆形平面
轨道控制：使用 OrbitControls 控制视角

核心参数

参数	值	说明
立方体大小	10, 10, 10	XYZ 三方向大小
球体半径	10	球体半径
圆柱参数	10, 10, 100	半径、半径、高度
矩形平面	10, 50	宽度、高度
圆形半径	10	圆形半径
材质颜色	0xff0000	红色

核心代码解析

创建多种几何体

javascript 复制代码

// BoxGeometry：长方体
const geometry1 = new THREE.BoxGeometry(10, 10, 10);
// SphereGeometry：球体
const geometry2 = new THREE.SphereGeometry(10);
// CylinderGeometry：圆柱
const geometry3 = new THREE.CylinderGeometry(10, 10, 100);
// PlaneGeometry：矩形平面
const geometry4 = new THREE.PlaneGeometry(10, 50);
// CircleGeometry：圆形平面
const geometry5 = new THREE.CircleGeometry(10);

创建材质和网格

javascript 复制代码

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

const mesh1 = new THREE.Mesh(geometry1, material);
mesh1.position.set(0, 0, 0);
const mesh2 = new THREE.Mesh(geometry2, material);
mesh2.position.set(0, 0, 30);
const mesh3 = new THREE.Mesh(geometry3, material);
mesh3.position.set(0, 0, 60);
const mesh4 = new THREE.Mesh(geometry4, material);
mesh4.position.set(0, 0, 90);
const mesh5 = new THREE.Mesh(geometry5, material);
mesh5.position.set(0, 0, 120);

scene.add(mesh1);
scene.add(mesh2);
scene.add(mesh3);
scene.add(mesh4);
scene.add(mesh5);

添加辅助线和控制器

javascript 复制代码

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", function () {
    renderer.render(scene, camera);
});

技术亮点

多种几何体：展示常见的 3D 几何体类型
BoxGeometry：创建立方体
SphereGeometry：创建球体
CylinderGeometry：创建圆柱
PlaneGeometry：创建平面

调试技巧

几何体参数：调整几何体参数改变形状
材质颜色：调整材质颜色
模型位置：调整模型位置避免重叠
相机位置：调整相机位置观察所有模型
观察点：调整观察点改变目标

扩展方向

更多几何体：添加更多几何体类型
几何体参数：调整几何体参数
材质类型：使用不同材质类型
几何体动画：动画几何体
自定义几何体：创建自定义几何体

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。