Threejs学习路线图：
官网本地部署
Three.js的官网在国外, 访问速度比较慢, 而我们需要经常参考文档和示例。因此, 考虑将Three.js的官网部署到本地。
1) 官网
https://threejs.org
2) GitHub
https://github.com/mrdoob/three.js/
我们可以直接从GitHub上clone最新的dev分支, 部署在本地方便查看。
3) 具体操作
通过git clone到本地
git clone https://github.com/mrdoob/three.js.git安装依赖
npm install运行
npm run start搭建开发环境
1) 开发建议
在开发之前, 我有几点建议
1一定使用代码自动补全!!!
由于three.js有众多的API, 名字长, 单词容易拼错, 基本上记不住
1模块化开发
threejs的官方从150+版本后打算废弃直接引入的方式, 并在160版本移除
2）初始化项目
创建一个目录three-basic, 执行
npm init -y
3) 安装three.js
npm install [email protected]⚠️ 特别注意
由于threejs的更新非常快, 这里默认安装会自动安装最新版的three.js, 不同的版本下API和目录结构可能不同
本教程(2023-05-10)使用的版本是最新版(v0.152.2)
为了保证一致性, 建议大家在安装时指定版本
4）使用vite
vite是开箱即用的下一代打包工具, 原生支持模块化开发
相比于webpackRollupParcel更快, 更好用
将vite安装成开发时依赖, 使用vite启动开发服务
npm i vite -D创建入口文件index.html, 在入口文件中引入
-
初始化样式reset.css
-
主入口文件main.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./src/assets/styles/reset.css" />
</head>
<body>
<script src="./src/main.js" type="module"></script>
</body>
</html>* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
}// 导入THREE
import * as THREE from 'three'
// 创建一个场景
const scene = new THREE.Scene()
console.log(scene)编辑package.json脚本
"scripts": {"dev": "vite"},启动开发服务
npm run dev测试
如果看教程过程中有任何不懂的地方，可以 领 视频版教程！
