Three.js快速入门
post by:追风剑情 2026-3-20 13:13
这是一个最简单的Three.js示例，创建一个旋转的3D立方体：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 最简单的立方体示例</title>
<style>
body { margin: 0; overflow: hidden; }
#info {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0,0,0,0.6);
padding: 8px 15px;
border-radius: 4px;
font-family: Arial, Helvetica, sans-serif;
pointer-events: none;
z-index: 100;
}
</style>
</head>
<body>
<div id="info">Three.js 立方体 | 自动旋转</div>
<!-- 引入 Three.js 核心库 (使用CDN) -->
<!-- type="importmap" 模块导入映射 -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.128.0/build/three.module.js"
}
}
</script>
<!-- type="module" 作为独立模块处理 -->
<script type="module">
// 导入 'three' 模块中的所有内容 * 放到 THREE 对象中
import * as THREE from 'three';
// --- 1. 创建场景 (Scene) ---
// 场景是所有物体的容器
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111122); // 设置深蓝黑色背景
// --- 2. 创建相机 (Camera) ---
// 使用透视相机: 参数(视野角度, 宽高比, 近裁剪面, 远裁剪面)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(2, 2, 5); // 将相机向右、向上、向后移动一点
camera.lookAt(0, 0, 0); // 让相机看向原点 (0,0,0)
// --- 3. 创建渲染器 (Renderer) ---
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 开启抗锯齿
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement); // 将canvas添加到body
// --- 4. 添加物体: 一个立方体 (Box) ---
// 4.1 创建几何体: 长宽高各为1.5的立方体
const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
// 4.2 创建材质: 使用标准材质，并设置颜色为亮橙色
// 注意：为了看到光照效果，标准材质需要光源，这里为了简单，使用基本材质
// 或者使用不需要光照的基础网格材质(MeshBasicMaterial)
const material = new THREE.MeshStandardMaterial({
color: 0xff6600,
roughness: 0.3, //粗糙度
metalness: 0.1, //金属度
emissive: 0x000000 //自发光
});
// 为了更简单，也可以使用基础材质(不需要光照):
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 纯绿色，不需要光源
// 4.3 将几何体和材质组合成网格对象
const cube = new THREE.Mesh(geometry, material);
// 4.4 将立方体添加到场景中
scene.add(cube);
// --- 5. 添加光源 (因为使用了需要光照的材质) ---
// 环境光: 提供基础照明
const ambientLight = new THREE.AmbientLight(0x404060);
scene.add(ambientLight);
// 添加一个点光源，从某个方向照亮立方体
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
// 再添加一个背光/补充光
const pointLight2 = new THREE.PointLight(0xffaa00, 0.5);
pointLight2.position.set(-3, 2, 2);
scene.add(pointLight2);
// 可选: 添加一个辅助网格，帮助观察位置 (不是必须的)
const gridHelper = new THREE.GridHelper(10, 20, 0x888888, 0x444444);
scene.add(gridHelper);
// 可选: 添加坐标轴辅助 (红X, 绿Y, 蓝Z)
// const axesHelper = new THREE.AxesHelper(3);
// scene.add(axesHelper);
// --- 6. 动画循环 ---
function animate() {
requestAnimationFrame(animate);
// 让立方体旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate();
// --- 7. 处理窗口大小变化，自适应 ---
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); // 更新相机的投影矩阵
renderer.setSize(window.innerWidth, window.innerHeight);
}
</script>
</body>
</html> 运行效果
1、创建六边形
const radius = 1.0; // 六边形外接圆半径
const height = 0.1; // 高度 0.1米
const radialSegments = 6; // 设置为6，生成六边形
const geometry = new THREE.CylinderGeometry(radius, radius, height, radialSegments);
2、将三角形拉伸成三棱柱
// 1. 定义三角形的二维轮廓 (Shape)
const shape = new THREE.Shape([
new THREE.Vector2(0, 0.5), // 顶部顶点
new THREE.Vector2(-0.5, -0.3), // 左下顶点
new THREE.Vector2(0.5, -0.3) // 右下顶点
]);
// 2. 拉伸设置
const extrudeSettings = {
depth: 0.5, // 拉伸高度 (沿Z轴)
bevelEnabled: true, // 是否启用倒角
bevelSegments: 2, // 倒角分段数
bevelSize: 0.05, // 倒角大小
bevelThickness: 0.05 // 倒角厚度
};
// 3. 创建拉伸几何体
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
评论：
发表评论：