Threejs的学习-入门

突然想学学webGL，所以做个记录。

Threejs，一个 基于WebGL 的 JavaScript 3D库 ，封装了WebGL，提供了一系列简单的API便于处理WebGL。

相关概念

场景：scene， 所有物体的容器

相机：camera，设置观察场景的角度和位置

渲染器：renderer， 负责将场景渲染到画布上

使用步骤

本质是使用Three的一系列API创建对象，然后相互组合。

1、下载并引入three.js文件

2、创建场景scene对象

3、创建相机camera对象，并根据参数进行设置

4、创建渲染器renderer对象，渲染器使用js添加到页面中

5、创建物体对象，并把物体对象添加到场景中

6、调用渲染器对象的render函数开始渲染，如果需要不断刷新则需要创建一个函数，并在函数中执行requestAnimationFrame函数，该函数由threejs提供，用于把页面再渲染一次

详细步骤

代码效果是创建一个不断旋转的正方体

1、引入three.js文件

<script src="js/three.js"></script>

2、创建场景scene对象

// 场景 所有物体的容器
var scene = new THREE.Scene();

3、创建相机camera对象，并根据参数进行设置

// 相机 决定了场景中那个角度的景色会显示出来
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

PerspectiveCamera 是threejs提供的 透视相机 ， 用于3D场景渲染的相机类型，它模拟了人眼观察世界的方式 ， 远处的物体看起来比近处的物体小，且遵循透视缩短规律。

构造函数参数：

• fov (Field of View，视野)：定义相机视锥体的垂直角度，以弧度为单位。通常设置为如75度这样的值。
• aspect (宽高比)：视锥体的宽高比，通常是渲染窗口的宽除以高。如果不指定，Three.js会在渲染时自动调整。
• near：近裁剪面距离相机的距离。任何比这个距离近的物体都不会被渲染。
• far：远裁剪面距离相机的距离。任何比这个距离远的物体都不会被渲染。

属性：

• position：相机的位置，一个THREE.Vector3对象。
• rotation：相机的旋转角度，一个包含x、y和z属性的对象，每个属性都是一个THREE.Euler对象。
• up：相机的上方向向量，一个THREE.Vector3对象，默认为(0, 1, 0)，即Y轴向上。

Vector3 三维向量 ， 接受三个参数来定义对象的 x、y 和 z ，分别对应 x、y 和 z轴上的值

4、创建渲染器renderer对象，渲染器使用js添加到页面中

var renderer =