Three.js搭建小米SU7三维汽车实战（1）搭建开发环境-EW帮帮网

1.基本概念

![](https://i-blog.csdnimg.cn/img_convert/3158b052559216515a866bc80bf0f399.png)

1) 场景

如何理解场景场景就是一个三维的世界, 在这个世界中可以放置各种各样的物体可以理解成一个** 空间** , 或者** 容器**

2) 相机

如何理解相机 🤔** 思考: ** 如何在二维平面表现三维效果由于我们的显示器是二维平面, 只有两个维度, 如何在一个二维平面表现出三维效果呢? 在现实生活中, 得益于拍照技术, 从不同的角度拍射(观察)同一个物体, 然后通过一些光照阴影我们的大脑可以自行脑补出三维的画图 ** 这里的相机就是三维空间的观察者** 当相机从不同的角度观察同一个物体会得到不同的图像, 然后把这些图像使用一定的技术拼接组合, 我们的大脑会根据生活在三维世界的经验自行脑补出三维空间

3) 物体

在三维空间, 可以放置一些物体, 这些物体就是** 被观察的对象** 不同的物体形状, 大小, 材质和纹理不相同尽可能模拟现实生活中的实际物体, 比如

4) 光源

有了光照，物体就会有明暗效果的区别

2.开发环境搭建

1) 开发建议

在开发之前, 我有几点建议 ** 1一定使用代码自动补全!!!** 由于three.js有众多的API, 名字长, 单词容易拼错, 基本上记不住 ** 2模块化开发** threejs的官方从150+版本后打算废弃直接引入的方式, 并在160版本移除

2) 初始化项目

创建一个目录three-basic, 执行

npm init -y

3) 安装three.js

```javascript npm install three@0.152 ```

⚠️**** 特别注意
由于threejs的更新非常快, 这里默认安装会自动安装最新版的three.js, 不同的版本下API和目录结构可能不同
本教程(2023-05-10)使用的版本是最新版(v0.152.2)
为了保证一致性, 建议大家在安装时指定版本

4) 使用vite

vite是开箱即用的下一代打包工具, 原生支持模块化开发相比于webpackRollupParcel更快, 更好用将vite安装成开发时依赖, 使用vite启动开发服务注意：使用5.4.11版本的vite

npm i vite@5.4.11 -D

创建入口文件index.html, 在入口文件中引入
●初始化样式reset.css
●主入口文件main.js

<!DOCTYPE html>
<html lang="en">
  <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

Three.js搭建小米SU7三维汽车实战（1）搭建开发环境