Three.js快速入门

作者：追风剑情发布于：2026-3-20 13:13 分类：Three.js

这是一个最简单的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);

标签: Three.js