Threejs梳理：二、快速入门-CSDN博客

本文链接：https://blog.csdn.net/weixin_43935062/article/details/148103664

上手 Three.js可以通过以下步骤快速入门：

1. 基础环境搭建

引入 Three.js
在 HTML文件中通过 CDN引入 Three.js（推荐最新版本）：

<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>

或通过 npm/yarn安装：

npm install three   # Node项目中使用

2. 核心三要素

Three.j的核心是 Scene（场景） 、 Camera（相机） 、 Renderer（渲染器） ：

// （1）创建场景（容器）
const scene = new THREE.Scene();

// （2）创建透视相机（视角参数）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);
camera.position.set(0,0,5); //设置相机位置 

// （3）初始化WebGL渲染器 
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); //将画布添加到页面

3. 添加物体与光源

几何体 +材质
例如创建立方体：

const geometry = new THREE.BoxGeometry(1,1,1); //形状 
const material = new THREE.MeshBasicMaterial({color:0x00ff00}); //绿色基础材质 
const cube = new THREE.Mesh(geometry, material); //组合成网格物体 
scene.add(cube); //添加到场景

光源（如需阴影或动态光照）

const light = new THREE.DirectionalLight(0xffffff,1); //平行光 
light.position.set(1,1,1);
scene.add(light);

4. 动画与渲染循环

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x +=0.01; //旋转动画 
    renderer.render(scene,camera); //每帧重新渲染 
}
animate();

5. 学习资源推荐

官方文档：https://threejs.org/docs/

常见问题

坐标系 ：右手系（Y轴向上）
调试工具 ：使用 THREE.AxesHelper显示坐标轴
进阶功能 ：加载外部模型（如 .gltf）、物理引擎（Rapier）、着色器定制等

按照上述步骤即可完成第一个旋转立方体！后续可逐步尝试复杂模型或交互功能。

以下是一个完整的 Three.js 入门示例页面代码，包含旋转立方体、光照和窗口自适应：

<!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; /* 隐藏滚动条 */
        }
        canvas { 
            display: block; 
        }
    </style>
</head>
<body>
    <!-- Three.js渲染的画布会自动插入到这里 -->
    <script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
    <script>
        // 1. 初始化场景、相机和渲染器
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x222222); // 设置背景色

        const camera = new THREE.PerspectiveCamera(
            75,                                   // 视野角度(FOV)
            window.innerWidth / window.innerHeight, // 宽高比
            0.1,                                  // 近裁剪面
            1000                                  // 远裁剪面
        );
        camera.position.z = 5; // 相机位置

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true; // 启用阴影
        document.body.appendChild(renderer.domElement);

        // 2. 创建立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshStandardMaterial({ 
            color: 0x00ff00,
            roughness: 0.2,
            metalness: 0.7
        });
        const cube = new THREE.Mesh(geometry, material);
        cube.castShadow = true; // 立方体投射阴影
        scene.add(cube);

        // 3. 添加平面作为地面
        const planeGeometry = new THREE.PlaneGeometry(5, 5);
        const planeMaterial = new THREE.MeshStandardMaterial({ 
            color: 0xcccccc,
            side: THREE.DoubleSide
        });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -Math.PI / 2; // 旋转90度变成水平面
        plane.position.y = -1;           // 下移1个单位
        plane.receiveShadow = true;      // 平面接收阴影
        scene.add(plane);

        // 4. 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff); // 环境光
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(2, 3, 1);
        directionalLight.castShadow = true; // 平行光投射阴影
        scene.add(directionalLight);

        // 5. (可选)添加坐标轴辅助
        const axesHelper = new THREE.AxesHelper(2);
        scene.add(axesHelper);

        // 6. 窗口大小自适应
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 7. 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            
            renderer.render(scene, camera);
        }
        
        animate();
    </script>
</body>
</html>