ThreeJs初体验2（旋转方块3D）

前期准备工作

引入three文件

1.Github下载代码，引入文件

下载地址
https://github.com/mrdoob/three.js

ThreeJs下载

2.CDN引入文件（推荐使用）

CDN地址
https://www.bootcdn.cn/three.js/

方块旋转

方块选择3D样式

代码

二十行左右的代码就实现一个简单的3D动画。

渲染步骤解析

创建场景

var scene = new THREE.Scene();

创建相机（透视相机）

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

渲染器

创建renderer var renderer = new THREE.WebGLRenderer(); 并将renderer插入到body下，渲染出 document.body.appendChild(renderer.domElement);

将物体添加到场景中

创建立方体 var geometry = new THREE.CubeGeometry(1, 1, 1); 网格基础材料 var material = new THREE.MeshBasicMaterial({}); 添加到场景中 var cube = new THREE.Mesh(geometry, material); scene.add(cube);

渲染

render( scene, camera, renderTarget, forceClear ) scene：前面定义的场景 camera：前面定义的相机 renderTarget：渲染的目标，默认是渲染到前面定义的render变量中 forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除 换个写法

将各个模块拆分

相机API

相机主要分为两种相机，分别是正交相机、透视相机。

正交相机（OrthographicCamera）：物品的渲染尺寸与它距离镜头的远近无关。也就是说在场景中移动一个物体，其大小不会变化。正交镜头适合2D游戏。

透视相机（PerspectiveCamera）：模拟人眼的视觉特点，距离远的物体显得更小。透视镜头通常更适合3D渲染。

PerspectiveCamera && OrthographicCamera(x,y,z,t) x - 视野角度（int） y - 渲染区域的比例(建议默认值为window.innerWidth/window.innerHeight) z - 最近镜头的距离 t - 远离镜头的距离

移动方法

camera.position(x,y,z)：控制相机在整个3D环境中的位置 camera.lookAt(x,y,z)：控制相机的焦点位置，决定相机的朝向 x、y、z分别对应坐标信息 requestAnimationFrame（）调用 灯光API

new THREE.LightAPI();

AmbientLight（环境光）

该光源均匀的打在物体上，光源均匀的打在场景内的物体上

PointLight（点光源）

该光源由一点发出，向四周扩散

SpotLight（聚光灯）

产生圆锥形光柱的灯光

DirectionalLight（平行光）

也就无限光，光线是平行的，所以被照到的地方都是一样的

HemisphereLight（半球光）

创建户外自然的光线效果

AreaLight（面光源）

指定一个发光的区域

LensFlare（镜头光晕）

给光效添加光晕

MESH API

在 threeJs 的世界中，材质(Material) 几何体(Geometry)就是一个 mesh

材质分类

MeshBasicMaterial

基本的材质，显示为简单的颜色或者显示为线框

MeshDepthMaterial

使用简单的颜色，但是颜色深度和距离相机的远近有关

MeshFacematerial

基于面Geometry的法线（normals）数组来给面着色

MeshLambertMateria

l考虑光线的影响，哑光材质

MeshPhongMaterial

考虑光线的影响，光泽材质

ShaderMaterial

允许使用自己的着色器来控制顶点如何被放置、像素如何被着色

LineBasicMaterial

用于THREE.Line对象，创建彩色线条

LineDashMaterial

用于THREE.Line对象，创建虚线条

RawShaderMaterial

仅和THREE.BufferedGeometry联用，优化静态Geometry（顶点、面不变）的渲染

SpriteCanvasMaterial

在针对单独的点进行渲染时用到

SpriteMaterial

在针对单独的点进行渲染时用到

PointCloudMaterial

在针对单独的点进行渲染时用到

2D & 3D 图形

2D
THREE.PlaneGeometry（）矩形
THREE.CircleGeometry（）圆形或者扇形
THREE.RingGeometry（）圆环或者扇环
THREE.ShapeGeometry （）自定义的二维图形
3D
THREE.BoxGeometry（）长宽高的盒子
THREE.SphereGeometry（radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength）- 三维球体/不完整球体
THREE. CylinderGeometry （）圆柱、圆筒、圆锥或者截锥

外部图形加载