Skip to content

Latest commit

 

History

History
284 lines (221 loc) · 5.53 KB

1.md

File metadata and controls

284 lines (221 loc) · 5.53 KB
Raw

第一章

WebGL与Three.js

什么是WebGL

WebGL是OpenGL的嵌入式版本移植到了网页平台

可以理解为WebGL是比较底层的图形接口,而Three.js对其进行了封装

什么是Three.js

Three.js是一个javascript的3D库

Three.js封装了底层图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景的渲染

此外Three.js还封装了canvas和svg渲染器

WebGL vs Three.js

简单来说就是Three.js封装得好

开始使用Three.js

准备工作

Hello,world

一个典型的Three.js程序至少要包括渲染器(Renderer), 场景(Scene), 相机(Camera),以及你在场景中创建的物体

渲染器

渲染器将和Canvas元素进行绑定,可以绑定已经有的canvas元素,当然也可以后续生成

var renderer = new THREE.WebGLRenderer({
	canvas: document.getElementById('mainCanvas')
})

// or
var renderer = new THREE.WebGLRenderer()
renderer.setSize(400, 300)
document.querySelector('body').appendChild(renderer.domElement)

背景色默认为黑色,我们可以修改背景色(用于清除页面的颜色),不过试了下貌似没效果

renderer.setClearColor(0xFF4965)

场景

在Three.js中,添加的物体都是添加到场景中,因此他相当于一个container,场景没有很复杂的操作,开始的时候实例化,然后将物体添加进入

var scene = new THREE.Scene()

照相机

Three.js的坐标系是右手坐标系 先定义一个透视投影的照相机

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000)
camera.position.set(0, 0, 5)
sence.add(camera)

将照相机加入场景中

长方体

创建一个x,y,z方向长度为1,2,3的长方体,并将其设置为红色

var cube = new THREE.Mesh(
	new THREE.CubeGeometry(1, 2, 3),
	new THREE.MeshBasicMaterial({
		color: 0xff4956
	})
)
scene.add(cube)

MeshBasicMaterial可以理解成是一种材质,可以设置物体的颜色

这里的长度是在物体坐标系中,长度为1,2,3是虚拟空间坐标系,属于相对长度????

渲染

在定义了场景中的物体,设置好照相机之后,渲染器就知道如何渲染出二维的结果了,这时候,我们只需要调用渲染函数就能渲染一次了

renderer.render(scene, camera)

Three.js功能概览

Three.js中的重要对象

Cameras(照相机,控制投影方式)

Camera
OrthographicCamera
PerspectiveCamera

Core(核心对象)

BufferGeometry
Clock(用来记录时间)
EventDispatcher(事件派发)
Face3
Face4
Geometry
Object3D
Projector
Raycaster(计算鼠标拾取物体使用 碰撞检测?)

Lights(光照)

Light
AmbientLight
AreaLight
DirectionalLight
HemisphereLight
PointLight
SpotLight

Loaders(加载器,用来加载特定文件)

Loader
BinaryLoader
GeometryLoader
ImageLoader
JSONLoader
LoadingMonitor
SceneLoader
TextureLoader

Materials(材质，控制物体的颜色、纹理等)

Material
LineBasicMaterial
LineDashedMaterial
MeshBasicMaterial
MeshDepthMaterial
MeshFaceMaterial
MeshLambertMaterial
MeshNormalMaterial
MeshPhongMaterial
ParticleBasicMaterial
ParticleCanvasMaterial
ParticleDOMMaterial
ShaderMaterial
SpriteMaterial

Math(和数学相关的对象)

Box2
Box3
Color
Frustum
Math
Matrix3
Matrix4
Plane
Quaternion
Ray
Sphere
Spline
Triangle
Vector2
Vector3
Vector4

Objects(物体)

Bone
Line
LOD
Mesh(网格,最常用物体)
MorphAnimMesh
Particle
ParticleSystem
Ribbon
SkinnedMesh
Sprite

Renderers(渲染器，可以渲染到不同对象上)

CanvasRenderer
WebGLRenderer(使用WebGL渲染，这是本书中最常用的方式)
WebGLRenderTarget
WebGLRenderTargetCube
WebGLShaders(着色器，在最后一章作介绍)

Renderers / Renderables

RenderableFace3
RenderableFace4
RenderableLine
RenderableObject
RenderableParticle
RenderableVertex

Scenes(场景)

Fog
FogExp2
Scene

Textures(纹理)

CompressedTexture
DataTexture
Texture

Extras

FontUtils
GeometryUtils
ImageUtils
SceneUtils

Extras / Animation

Animation
AnimationHandler
AnimationMorphTarget
KeyFrameAnimation

Extras / Cameras

CombinedCamera
CubeCamera

Extras / Core

Curve
CurvePath
Gyroscope
Path
Shape

Extras / Geometries(几何形状)

CircleGeometry
ConvexGeometry
CubeGeometry
CylinderGeometry
ExtrudeGeometry
IcosahedronGeometry
LatheGeometry
OctahedronGeometry
ParametricGeometry
PlaneGeometry
PolyhedronGeometry
ShapeGeometry
SphereGeometry
TetrahedronGeometry
TextGeometry
TorusGeometry
TorusKnotGeometry
TubeGeometry

Extras / Helpers

ArrowHelper
AxisHelper
CameraHelper
DirectionalLightHelper
HemisphereLightHelper
PointLightHelper
SpotLightHelper

Extras / Objects

ImmediateRenderObject
LensFlare
MorphBlendMesh

Extras / Renderers / Plugins

DepthPassPlugin
LensFlarePlugin
ShadowMapPlugin
SpritePlugin

Extras / Shaders

ShaderFlares
ShaderSprite