threejs cdn(ThreeJs初体验2)

前期准备工作

• 引入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);

• 渲染器

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

灯光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 （）圆柱、圆筒、圆锥或者截锥

外部图形加载

• 贴图必须是(2的幂数)X (2的幂数)，否则容易造成图形变形

格式概述

粒子

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

交互

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

动画

requestAnimationFrame(动画)

参考资料

https://sq.163yun.com/blog/article/203590884053413888