摘要
本教程面向 Three.js 初学者，从零搭建一个旋转的 3D 立方体。通过 Vite 初始化 JavaScript 项目，安装 Three.js 依赖；样式表中编写全局重置和 canvas 全屏布局，确保画布铺满视口且无间隙。核心代码依次创建场景、透视相机、网格物体，并利用 requestAnimationFrame 启动动画循环，实现连续旋转。针对常见困惑，教程强调：Three.js 渲染逻辑本身不依赖 CSS，即使没有样式文件，立方体照样旋转绘制，但 CSS 充当视觉装饰层，负责控制画布的显示尺寸、消除浏览器默认边距，让画面呈现更完美。两者职责分明，互不干扰，帮助初学者理解渲染器与样式层的关系。
目录
1.创建一个vite项目
2.打开新项目
①安装依赖
②查看启动命令，启动项目
3.基础代码编写
4.正式编写three.js
①安装three.js的依赖
②在main.js中，编写代码（核心环节）
③启动项目，查看效果
思考：如何理解“渲染器（Renderer）负责将场景和相机的内容绘制到 canvas 元素，最终显示在网页中”这句话？
1.创建一个vite项目
①执行npm的init命令
npm init vite@latest
②新项目命名
③不选择任何框架（后续再考虑使用vue）
④选择javascript
最后，敲回车，创建项目。
2.打开新项目
①安装依赖
npm install
②查看启动命令，启动项目
3.基础代码编写
修改style.css代码，给整个项目的全局样式定基调
/* 全局样式重置：移除所有元素默认的外边距和内边距，确保布局从零开始 */
*{
margin: 0;
padding: 0;
}
/* canvas元素样式：作为固定定位的块级元素，铺满整个视口 */
canvas{
display: block;/* 将canvas设为块级元素，消除行内元素默认的基线间隙 */
position: fixed;/* 固定定位，相对于浏览器窗口进行定位，滚动时不会移动 */
left: 0;/* 距离窗口左侧0像素 */
top: 0;/* 距离窗口顶部0像素 */
width: 100vw;/* 宽度占满整个视口宽度（viewport width） */
height: 100vh;/* 高度占满整个视口高度（viewport height） */
}
4.正式编写three.js
①安装three.js的依赖
npm install three
效果如下
②在main.js中，编写代码（核心环节）
//导入three.js
import * as THREE from "three";
//创建场景,场景（Scene）是所有物体的容器，相当于一个三维世界，相机和渲染器都基于它工作。
const scene = new THREE.Scene()
//创建相机
//PerspectiveCamera（透视相机）模拟人眼透视效果，参数依次为：
// ①视角（fov）—— 视野宽度，越大看到范围越广，类似广角镜头；
// ②宽高比（aspect）—— 通常设为窗口宽/高，防止画面变形；
// ③近平面（near）和远平面（far）—— 相机能看到的最近和最远距离，超出范围被裁剪。
const camera = new THREE.PerspectiveCamera(
45, //视角（视角越大，视野越宽，看的范围越宽）
window.innerWidth / window.innerHeight,//宽高比
0.1,//近平面
1000//远平面
)
//创建渲染器
// 渲染器（Renderer）负责将场景和相机的内容绘制到 canvas 元素上，最终显示在网页中。
// setSize 设置渲染尺寸，appendChild 将 canvas 添加到 body 中。
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建一个几何体
// MeshBasicMaterial 是一种基础材质，不依赖光照直接显示颜色，适合入门演示，这里设为绿色 (0x00ff00)。
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建材质
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
//创建网格
// 网格（Mesh）是几何体 + 材质的组合，是场景中最常用的可见物体对象。
const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景中
//只有将网格加入场景，相机和渲染器才能捕捉到它并显示在屏幕上。
scene.add(cube);
//设置相机位置
// 默认相机在原点 (0,0,0)，而立方体也在原点，所以需要将相机沿 Z 轴后移才能看到立方体。
// lookAt 指定相机朝向原点，确保立方体居中显示。
camera.position.z = 5;
camera.lookAt(0, 0, 0);
//渲染函数
// animate 使用 requestAnimationFrame 实现连续动画（每帧调用自身），形成循环。
// 每帧让立方体绕 X 和 Y 轴旋转 0.01 弧度，产生旋转效果。
// renderer.render 执行真正的绘制，将当前帧的场景通过相机渲染到屏幕。
function animate(){
requestAnimationFrame(animate);
//旋转
cube.rotation.x +=0.01;
cube.rotation.y +=0.01;
//渲染（渲染到页面，才能被我们看到）
renderer.render(scene, camera);
}
//打开页面就触发上述自定义的渲染函数，这样就能看到一个旋转的立方体
animate();
③启动项目，查看效果
可见此时确实有一个在不断旋转的立方体。
此时我们的第一个入门3D页面就开发完成了
思考：如何理解“渲染器（Renderer）负责将场景和相机的内容绘制到 canvas 元素，最终显示在网页中”这句话？
上图两块的内容，是啥关系？是硬性依赖？
答案：Three.js 的渲染不依赖 CSS（哪怕没有 CSS，立方体照样转），但 CSS 是用来让这个画布完美全屏、无空隙、不变形的“最后一公里”装饰工。
