--- theme: orange --- ## 一、搭建项目 1. 创建文件夹并下载依赖这里用 `vite` 打包，也可以选择其他打包构建工具 ``` mkdir three-demo cd three-demo npm i --save three npm i --save-dev vite ``` 2. 新建 `index.html` 和 `main.js` ```html 03 - First Three.js Project

Soon to be a Three.js website

``` 在`main.js`导入并打印（后续 js 都添加到此文件） ```js import * as THREE from 'three'; console.log(THREE) ``` 3. 修改 `package.json`, 配置打包和运行2个命令 ```js "scripts": { "dev": "vite", "build": "vite build" }, ``` 4. Vite 应该显示一个类似于的 URL `http://localhost:5173/`。将其复制并粘贴到浏览器中，即可像打开任何网站一样打开它。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4920ad27953f4e5f814f9ef2c608ee12~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3072&h=1920&s=218535&e=jpg&b=ffffff) ## 二、创建场景并制作物品需要4个元素才能开始： - 包含对象的场景 - 一些物体 - 相机 - 渲染器 #### 场景好比容器，将对象、模型、粒子、灯光等放入，指定时间渲染场景用[Scene](https://threejs.org/docs/index.html#api/en/scenes/Scene)类创建场景 ``` const scene = new THREE.Scene() ``` #### 对象[](https://threejs-journey.com/lessons/first-threejs-project#objects) 对象可以是很多东西。可以拥有原始几何图形、导入的模型、粒子、灯光等。创建一个简单的红色立方体，使用[BoxGeometry](https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry)类，其前 3 个参数对应于盒子的大小 ``` // 创建立方体 const geometry = new THREE.BoxGeometry(1, 1, 1) ``` 为了创建材质，使用带有一个参数的[MeshBasicMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial)类：一个`{}`包含所有选项的对象。指定它的`color`属性。 ``` const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }) ``` > 颜色值可为： 1. JS 十六进制，如`0xff0000` 2. 字符串十六进制，如`'#ff0000'` 3. 颜色名称，如`red` 创建最终的网格，使用[Mesh](https://threejs.org/docs/index.html#api/en/objects/Mesh)类并发送`geometry`和作为`material`参数 ``` const mesh = new THREE.Mesh(geometry, material) ``` 使用`add(...)`方法将网格添加到场景中，不然看不见它： ``` scene.add(mesh) ``` #### 相机[](https://threejs-journey.com/lessons/first-threejs-project#camera) 相机不可见。当渲染场景时，它将是从该摄像机的角度进行的。一般只使用一台相机。为了创建相机，我们使用[PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera)类。我们需要提供两个基本参数。 **1. 视野范围** > 视野是指你的视角有多大。如果您使用非常大的角度，您将能够同时看到每个方向，但会出现很大的失真，因为结果将绘制在一个小矩形上。如果使用小角度，物体看起来会放大。视野（或`fov`）以度数表示，对应于垂直视角。在本练习中，我们将使用`75`度角。 **3. 纵横比** > 在大多数情况下，长宽比是画布的宽度除以高度。目前我们还没有指定任何宽度或高度，但稍后我们需要指定。与此同时，我们将创建一个具有可以重复使用的临时值的对象。 ```js // Sizes const sizes = { width: 800, height: 600 } // Camera const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) camera.position.z = 3 scene.add(camera) ``` **ps: 相机必须添加到场景，不然会导致未知错误！** > 该`position`属性是一个具有三个相关属性的对象：`x`、`y`和`z`。默认情况下，Three.js 认为前/后轴为`z` #### 渲染器[](https://threejs-journey.com/lessons/first-threejs-project#renderer) 渲染器的工作就是进行渲染。使用带有一个参数的[WebGLRenderer](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer)类：一个`{}`包含所有选项的对象，指定`canvas`与`