初识 Three.js
起因
今天突然想学习网页 3D 技术
那么就来学一下构建网页 3D 的一个很热门的技术，Three.js
既然要学习了，那我们肯定要去他的官网学习一下的
安装和配置
是以下这个网址
Three.js - JavaScript 3D library
在找到它的文档页面，也可以直接点击以下链接
因为 three.js 的官网是部署在国外的，我们访问可能会有些慢
所以我们也可以通过克隆他们的 github 地址来本地部署
GitHub - mrdoob/three.js: JavaScript 3D Library.
在安装之前需要安装配置好 node，相信你们应该都是有配置好了的，这里就不过多赘述
先把它 down 下来之后就可以开始进行本地部署了
# 安装依赖
npm install
# 运行
npm run dev
成功安装运行后，会输出以下界面，在浏览器输入这些网址就可以访问到本地部署的服务了
基本概念
开始之前，我们需要了解一下基本的概念
场景
首先是场景，创建 3D 需要有一个场景，场景我的理解是相当于一个容器，来放各种东西的
摄像机
然后是摄像机，摄像机就想当于我们的眼睛，我们的眼睛能看到啥，都是摄像机提供的
物体
接下来是物体，3D 里面的物体有形状和材质
开始敲代码
首先我们需要通过 node 进行初始化
# 新建一个文件夹，在该文件夹下进入终端，输入以下命令
npm init
# 之后一路敲回车
# 安装依赖
npm install
接下来，我们需要安装依赖
# 这个是我们的要学习的框架，three.js
npm install three
npm install gsap
npm install dat.gui
# 这个包是热更新的包
npm install parcel-bundler
安装好之后，在根文件夹建立以下结构的文件，并且在 index.html 里面引入 style.css 和 main.js
之后我们在 packag.json 文件里面有一个 script 属性，我们给他改成以下格式
"scripts": {
"dev": "parcel src/index.html",
"build": "parcel src/index.html"
}
把 style.css 里面的 body 样式更改一下，待会儿看看能不能成功运行
# 运行
npm run dev
如果你的网页上的 body 样式变成了你更改过后的样式那么就代表你成功了
成功之后，我们就可以开始敲代码了
首先，我们需要把 three.js 引入进来，打印一下看看引入成功与否
import * as THREE from "three";
console.log(THREE);
接下来，我们需要创建一个场景，没有场景就相当于没有容器，不能装东西了
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
之后我们要创建一个相机，没有相机就相当于没眼睛来看了，有关于摄像机视锥的知识，我们放到后一篇文章来讲
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
// 角度
75,
// 宽高比
window.innerWidth / window.innerHeight,
// 最近可视距离
0.1,
// 最远可视距离
1000
);
有了相机，相机自然是需要一个位置的，需要在场景里面添加相机和相机的位置
// 场景添加东西的代码是，xxx 是 three 属性 new 出来的一个构造对象
scene.add(xxx);
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
之后我们来创建一个物体，并且在场景里面添加进去
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
// 物体 -> 方形
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质 -> vue 的主题色
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0x4fc08d });
// 生成物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube);
之后有了相机，有了场景，有了物体
那肯定要把它能够解析出来放到页面上
这时候我们就需要一个渲染器了，把渲染器渲染出来的东西添加到页面上
在把场景和相机放入渲染器就可以生成我们的第一个 3D 图形啦，虽然可能是非常的简单
但是有些东西也是蛮重要的，我们下篇文章进行讲解
import * as THREE from "three";
console.log(THREE);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 给相机一个位置
camera.position.set(0, 0, 10);
// 在场景里面添加相机
scene.add(camera);
// 物体 -> 方形
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质 -> vue 的主题色
const cubeMaterial = new THREE.MeshBasicMaterial({
color: 0x4fc08d });
// 生成物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将物体添加到场景中
scene.add(cube);
// 生成渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染器渲染的是画布 -> canvas
// 需要将渲染的 canvas 内容添加到 body 上
document.body.appendChild(renderer.domElement);
// 通过渲染器将场景和相机进行渲染
renderer.render(scene, camera);
以上就是我今天所分享的学习的东西，我们明天继续第二集~