WebGL+Three.js—第八章 Threejs入门8.1 什么是threejs 8.2 渲染三维对象 8.2.1

8.1 什么是threejs

Threejs是WebGL的3d库，它主要是方便我们更好的操作WebGL，而且它内置了很多的方法，让我们实现WebGL功能的时候更加简便。

1、threejs官网：threejs.org/

2、threejs依赖库

(1)npm下载（推荐）

如果直接下载最新版，那就npm i three；如果需要选择版本，那么可以在npm库查看版本号再下载www.npmjs.com/package/thr…

默认是使用npm的方式，因为threejs不只是它自身的核心库，它还需要依赖很多衍生的插件辅助，开发过程中不可能一个一个去找的，而npm i three是最完整的一套。

(2)最新版在线链接

threejs.org/build/three…

(3)字节跳动js库（不推荐）

网址：cdn.bytedance.com/?query=thre…

更新不够及时，版本相对比较落后。

8.2 渲染三维对象

在这里先不详细去说明每个环节、每个方法的细节部分，先熟悉threejs的主要流程和一些关键对象的创建和设置。在后续的章节会逐一讲解threejs的各个模块。

8.2.1 创建场景、相机、渲染器

这里的相机使用的是透视投影相机，里面有4个参数：视角、宽高比、近平面、远平面。视角相当于我们眼睛的视野，角度越大看到的东西越多，反之则越少；宽高比暂定为屏幕的宽高；近平面就是相机最近能看到物体的距离，远平面就是相机最远能看到物体的距离。这个近远平面也可以理解为物体离我们眼睛的距离。

透视投影相机其实就是WebGL中的透视投影矩阵，它的原理可以参考# WebGL+Three.js—第五章 WebGL三维世界## 5.3 透视投影。

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个相机 视点
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机的位置
camera.position.set(0,0,20);

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

8.2.2 创建物体

创建物体基本上有两个步骤，一个是创建物体的对象，其次是创建物体的材质。材质简单可以理解成生活中这个物品是用纸制作的还是塑料制作的意思。

这里以立方体作为例子。

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个相机 视点
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机的位置
camera.position.set(0,0,20);

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个立方体
// 定义了一个立方体的对象
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);

// 创建材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 添加到场景里
scene.add(cube);

renderer.render(scene, camera);

8.2.3 添加动画

我们一般会使用requestAnimationFrame来实现动画，它会一帧一帧的去调用这个动画函数。

const animation = () => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染
  renderer.render(scene, camera);

  requestAnimationFrame(animation);
}
animation()

8.2.4 代码示例

8.3 设置响应式画布与全屏控制

8.3.1 设置响应式画布

在初始化加载的时候，它可以占满整个容器进行渲染，但如果容器大小发生变化的时候，例如拖拽浏览器窗口大小，它不会重新渲染，出现空余留白的现象。

我们可以通过监听浏览器窗口变化事件，然后处理以下3个内容即可完成响应式画布：

1、重置渲染器宽高比

2、重置相机宽高比

3、更新相机投影矩阵

// 监听窗口变化
window.addEventListener('resize', () => {
  // 重置渲染器宽高比
  this.renderer.setSize(window.innerWidth, window.innerHeight);
  // 重置相机宽高比
  this.camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机投影矩阵
  this.camera.updateProjectionMatrix();
})

8.3.2 设置全屏效果

threejs提供了一个requestFullscreen方法可以实现全屏效果，通过渲染器去调用它即可。

// 设置全屏效果
handleFullScreen() {
  this.renderer.domElement.requestFullscreen();
}

WebGL+Three.js—第八章 Threejs入门