前期准备工作引入three文件

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

下载地址

ThreeJs下载

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

CDN地址

方块旋转

方块选择3D样式

代码

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

渲染步骤解析创建场景

var scene = new THREE.Scene();

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

创建renderervar 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（）调用

new THREE.LightAPI();

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

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 图形2DTHREE.PlaneGeometry（）矩形THREE.CircleGeometry（）圆形或者扇形THREE.RingGeometry（）圆环或者扇环THREE.ShapeGeometry （）自定义的二维图形3DTHREE.BoxGeometry（）长宽高的盒子THREE.SphereGeometry（radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength）- 三维球体/不完整球体THREE. CylinderGeometry （）圆柱、圆筒、圆锥或者截锥外部图形加载贴图必须是(2的幂数)X (2的幂数)，否则容易造成图形变形

格式概述

粒子

var particle = THREE.Sprite（）生成之后添加到场景scene.add(particle);

THREE.Raycaster（）判断鼠标当前位置THREE.Vector2（）获取点击点的平面坐标

requestAnimationFrame(动画)