入门three.js之初环境搭建

396 阅读1分钟

1. 安装node.js Node.js (nodejs.org)

验证是否安装成功 node -v 查看版本号

image.png

2. 选用vite创建项目:

npm create vite@latest

image.png 选择 Vanilla

cd threejs-vite 进入项目目录

npm install 下载项目依赖

npm run dev 运行项目

3. 创建第一个 three.js 项目

用 vscode 打开项目代码,简化项目结构; 3.1 修改 main.js 代码:

image.png 3.2 修改 style.css 代码:

image.png 3.3 在项目目录下新建 01-threejs-basic.js 文件,并在 main.js 中引入:

image.png 3.4 在01-threejs-basic.js 文件编写 three.js 代码:

注意要添加依赖: npm install three

3.5 浏览器效果:

image.png