Three.js入门（涉及本地搭建threejs官方网站、使用parcel搭建three.js开发环境等）

---

three.js

我跟的课程：https://www.bilibili.com/video/BV1Gg411X7FY?p=3&spm_id_from=pageDriver&vd_source=d45e199a358edbf199494ee895775ab3

本文是我自己整理的课程笔记，因为最近的项目要使用three.js，我就开始学习啦，需要的话大家也可以跟着这位老师的课程看我的笔记。

1.在本地搭建three.js官方网站

在github.com/mrdoob/three.js/中，点击SSH，Download ZIP，得到压缩包后，拖入Vscode，在集中终端中打开examples文件夹，npm install-npm run dev（用yarn也是可以的），按住ctrl点开得到的地址，就可以在本地查看threejs官方网站了。如果想查看案例的源码，可以通过名字在examples文件夹中找到该案例。

2.使用parcel搭建three.js开发环境

2.1为什么要使用parcel

需要利用模块化开发让我们的代码书写更加高效，实现自动补全等功能，parcel对于新手来说也比webpack更简单、快捷。

2.2创建项目文件夹

将新建文件夹拖入Vscode中，并进行初始化：

初始化流程在parcel官网也有：https://www.parceljs.cn/getting_started.html

1.在集成终端中打开；

2.npm init（进行初始化，一直回车，直到得到package.json）;

3.npm install parcel-bundler（也可以先不用全局安装）；

4.配置命令，把原有的test替换掉：

"scripts": {
    "dev": "parcel <your entry file>",
    //<your entry file>为你需要打包的文件
    "build": "parcel build <your entry file>"
  }

5.新建src文件夹（一般方源码的位置），在其下新建index.html；

将替换为src/index.html

6.npm install parcel-bundler --save-dev：将依赖转为开发依赖；

7.新建资源文件夹assets，在其下新建css、imgs文件夹，并在index.html进行常规引入：

<link rel="stylesheet" href="../assets/css/style.css" />

8.新建main文件夹，下设main.js，并在index.html中引入该入口文件：

<scrpit src="../main/main.js" type="module"></script>
//module表示模块化开发

9.在css文件夹下新建style.css，重置样式：

*{
  margin:0;
  padding:0;
}
body{
  background:skyblue
}

10.在main.js中导入three.js：

import * as THREE from "three"
cosole.log(Three)

11.安装three.js：

在node.js中npm install three --save，安装好后，在node_modules里就能找到three.js的模块。

12.运行three.js：

npm run dev，自动生成dist打包文件。

同时检查background和console.log是否显示。

2.3搭建three出现的问题

搭建时有同学会出现regeneratorRuntion is not defined的问题，是由于版本未更新造成的。解决方案：删除cache, parcel-cache, node_modules, yarn-lock, package-lock.json。（在node终端执行删除命令：del .\yarn-lock）

手动删除package.json中的各种依赖，并在官网（https://parceljs.org/docs/）查看parcel的v2版本，在webapp中复制命令：

npm install --save-dev parcel

如果项目需要安装其他依赖，就自己再安装。

npm run dev开启项目。

2.4使用threejs简单渲染物体：了解threejs最基本的内容

1.打开本地编辑器editor；

2.相机、场景、物体的设置：

在main.js中初始化场景（在文档中搜索scene也可以看到）：

const scene = new THREE.Scene()

创建相机（相机就相当于人的眼睛）

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerWidth, 0.1, 1000)
//透视相机

相机的类别不同，有正交相机（更卡通一些）、透视相机等等。

我们可以看到，需要给相机设置宽高比和角度，来显示出他透视的范围。我们可以设置距离多近才看得到、距离多远就看不到了等等数据，这一概念叫视锥体（viewing frustum）。

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov：摄像机视锥体垂直视野角度
aspect：摄像机视锥体长宽比
near：摄像机视锥体近端面
far：摄像机视锥体远端面

这些参数一起定义了摄像机的视锥体。

3.设置相机对象的位置：

position属性表示三维向量对象，set(x,y,z)可以设置具体位置。

camera.position.set(0,0,10)

scene.add(camera)

4.添加物体：

这里以boxGeometry为例

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width：X轴上面的宽度，默认值为1。
height：Y轴上面的高度，默认值为1。
depth：Z轴上面的深度，默认值为1。
widthSegments：（可选）宽度的分段数，默认值是1。
heightSegments：（可选）高度的分段数，默认值是1。
depthSegments：（可选）深度的分段数，默认值是1。

const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00})
//根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
//将几何体添加到场景中
scene.add(cube);
//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染的尺寸大小：渲染画布Canvas，所以还要将Canvas添加到Body上
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera)

---

以上就是本文的全部内容，之后的课程学习我也会坚持更新笔记的，之前vue相关的项目也会继续更完。本次的复盘到这里就结束啦，大家一起加油！