文章同步更新于我的个人博客：松果猿的博客，欢迎访问获取更多技术分享。
同时，您也可以关注我的微信公众号：松果猿的代码工坊，获取最新文章推送和编程技巧。
记录本人three.js的学习之路
前言：
Three.js其实也不是我才开始接触，之前做过一个参赛项目就用到了three.js技术，但是除了three.js，还有许多其他优秀的Web3D技术解决方案，比如说Babylon.js。最近Babylon.js也在雄起，大有赶超three.js之势，不过目前最普及受众最广的还是three.js
Three.js资源包：直接去github上下载
目录信息：
three.js-文件包
└───build——three.js相关库，可以引入你的.html文件中。
│
└───docs——Three.js API文档文件
│───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源
│───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码，有兴趣可以阅读。
│
└───editor——Three.js的可视化编辑器，可以编辑3D场景
│───index.html——打开应用程序
引入three.js
1.使用 NPM 和构建工具进行安装
为了方便学习直接使用 Vite 初始化工程，我们后面学习也是以这种简单的构建方法来进行的
npm install vite --save-dev
安装three.js
npm install --save three
2.在.html文件中直接引入threejs
将three.js资源包里的build目录放入项目中
<script src="./build/three.js"></script>
//或者
<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>
创建一个初始场景
安装后three.js，在我们的根目录下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite_Threejs</title>
</head>
<body>
</body>
</html>
新建main.js
import * as THREE from 'three';
首先一个three.js场景，最重要的三个要素是：场景（scene）、相机（camera）和渲染器（renderer）
// 创建一个新的Three.js场景
const scene = new THREE.Scene();
// 创建透视相机，设置视场角，宽高比，近裁剪面和远裁剪面
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
设置摄像机的位置
camera.position.z = 5;
设置渲染器的尺寸为窗口的宽度和高度
renderer.setSize( window.innerWidth, window.innerHeight );
将渲染器的DOM元素添加到文档的主体中
document.body.appendChild( renderer.domElement );
场景创建完成后，还需要添加点东西进去吧
添加一个物体
three.js提供了许多现成的简单模型供我们调用，这样就不用像原生WebGL写一大堆繁琐的代码才能渲染一个简单图形
首先这个物体需要一个结构
//创建一个立方体几何体
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 );
你以为这就完了？不不不，还有最后一步，我们就成功创建好这个工程了
渲染场景
在3D图形和动画中，场景需要不断更新以反映时间的变化，例如物体的移动、摄像机的变化、光照效果等，这时候就需要我们创建一个动画循环，这个循环能够不断地更新和渲染场景
// 定义渲染循环函数
function render() {
// 渲染场景
renderer.render( scene, camera );
// 调用requestAnimationFrame函数，在下一帧渲染
requestAnimationFrame( render );
}
// 调用渲染循环函数
render();
让我们使其动起来
// 定义渲染循环函数
function render() {
// 渲染场景
renderer.render(scene, camera);
// 更新立方体的旋转角度
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 调用requestAnimationFrame函数，在下一帧渲染
requestAnimationFrame(render);
}
// 调用渲染循环函数
render();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite_Threejs</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
main.js
import * as THREE from "three";
// 创建一个新的Three.js场景
const scene = new THREE.Scene();
// 创建透视相机，设置视场角，宽高比，近裁剪面和远裁剪面
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置摄像机的位置
camera.position.z = 5;
// 设置渲染器的尺寸为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的DOM元素添加到文档的主体中
document.body.appendChild(renderer.domElement);
// 创建一个立方体几何体
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);
// 定义渲染循环函数
function render() {
// 渲染场景
renderer.render(scene, camera);
// 更新立方体的旋转角度
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 调用requestAnimationFrame函数，在下一帧渲染
requestAnimationFrame(render);
}
// 调用渲染循环函数
render();
运行！！！
npx vite
成功看到一个旋转的绿色立方体
ok，这样我们就成功创建一个案例，进入three.js的学习之旅了
