Three.js搭建开发环境
1 官网本地部署
Three.js的官网在国外, 访问速度比较慢, 而我们需要经常参考 文档 和 示例
因此, 考虑将Three.js的官网部署到本地
1) 官网
2) GitHub
我们可以直接从GitHub上clone最新的
dev
分支, 部署在本地方便查看。
3) 具体操作
通过
git clone
到本地
git clone https://github.com/mrdoob/three.js.git
安装依赖
npm install运行
npm run start2 搭建开发环境
1) 开发建议
在开发之前, 我有几点建议
- 一定使用代码自动补全!!!
由于
three.js
有众多的API, 名字长, 单词容易拼错, 基本上记不住
- 模块化开发
threejs的官方从150+版本后打算废弃直接引入的方式, 并在160版本移除
2) 初始化项目
创建一个目录
three-basic
, 执行
npm init -y3) 安装three.js
npm install three4) 使用vite
vite是开箱即用的下一代打包工具, 原生支持模块化开发
相比于
webpackRollup
Parcel
更快, 更好用
将vite安装成开发时依赖, 使用
vite
启动开发服务
npm i vite -D
创建入口文件
index.html
, 在入口文件中引入
-
初始化样式
reset.css -
主入口文件
main.js
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 使用模块化方式引入入口文件 -->
<script src="./src/main.js" type="module"></script>
</body>
</html>
margin: 0;
padding: 0;
body {
background-color: skyblue;
}
// 导入THREE
import * as THREE from 'three'