three.js介绍

虽然说没有真正的用过，但是大家应该都听过，three.js是一个基于webgl的3d库，封装了灯光，几何体，材质等功能，能够让你不接触复杂的webgl逻辑和计算，实现出大多数3d场景。

三维场景组成部分

我们通过建立一个简单的场景来了解threejs的使用过程。首先通过一个三维场景中需要包括：

场景scene：储存物体和光源；
摄像机camera：充当用户视角；
渲染器renderer：渲染最终画面；

1、场景

场景就是通过threejs创建一个场景对象，引入threejs的包就可以拿到THREE对象。

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

2、摄像机

常用的摄像机有PerspectiveCamera（透视摄像机）和 OrthographicCamera（正交摄像机）两种，两种摄像机代表了webgl中两种投影。区别是透视投影会产生近大远小的效果，正交投影则不会因为距离影响物体大小。

// 创建摄像机  透视摄像机
const camera = new THREE.PerspectiveCamera(
  // 视野角度
  45,
  // 画布长宽比
  window.innerWidth / window.innerHeight,
  // 近截面
  0.1,
  // 远截面
  1000
);

// 正交摄像机
// THREE.OrthographicCamera(左距离,右距离,上距离,下距离,近截面,远截面);

在了解各个参数的意义之前我们先了解另外一个点——视点，通过视点，我们才能确定我们看的方向和位置。在threejs中canera就是我们的眼睛。我们可以直接设置camera的位置和朝向。

// 摄像机位置 和 看向原点
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);

设置了位置和朝向，通过两个点确定一条线，我们就可以确定画布上的视线，如图我们视线是朝向z轴负半轴。

对于正交摄像机，所展示的区域是一个长方体，左距离\右距离\上距离\下距离都是根据视点确定的，这四个距离就可以确定一个垂直于视线的面，下面这张图可以表示这个平面，然后通过定义近截面距离摄像机的距离和远截面距离摄像机的距离，就可以确定唯一一个长方体，在长方体内的物体就能展示，之外的就是视线外面了。

对于透视摄像机来说可视空间就是一个梯形体，通过视角就可以确定视线上一系列的平面，通过框选近\远截面来确定一个范围，然后因为视角确定的平面是圆形的，所以需要通过宽高比来确定出一个矩形。同时这个宽高比记得设置成画布的高宽比，不然会被拉伸变形。

下面是一个使用透视投影的例子，我们在y轴两侧各放三个一样大的z轴不一样的三角形，在透视投影我们会看到如下近大远小的效果。

至于为什么我们要设置近远截面，是因为webgl的性能开销考虑，展示太大范围的位置会大量消耗性能。而且近远截面不能小于等于0，毕竟我们后脑勺没有长眼睛，绘制看不到的东西只会浪费性能。

3、渲染器

直接创建一个three的渲染器，同时设置渲染器的尺寸，然后把它挂载在页面上，最后调用render方法，传入场景和摄像机就可以渲染出我们第一个threejs代码了。

const renderer = new THREE.WebGLRenderer();
// 设置尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 加到页面上
document.documentElement.appendChild(renderer.domElement);
// 渲染画面
renderer.render(scene, camera);

你会发现代码没有报错，但是什么也没有，为了证明画布的存在我们可以添加一个画布背景色

renderer.setClearColor(new THREE.Color(0xaaaaff));

需要放在渲染前面才会生效，可以看看最后的效果。 code.juejin.cn/pen/7097252… 画布出来了，下一章我们来讲讲怎么往里面加三维物体。

Threejs开发指南1——三维场景准备

three.js介绍

三维场景组成部分

1、场景

2、摄像机

3、渲染器