WebGL学习笔记 – Ivan's Blog

Ivan's Blog

WebGL学习笔记

8月
27

入职第一个正经的任务,学习Three.js,最近整理的笔记,比较乱,忙完上demo。

1.Three.js是一个3D JavaScript库。Three.js封装了底层的图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景的渲染。
2.目录架构

– Build目录: 包含两个文件,three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩,一个没有压缩的js文件。
– Docs目录: 这里是three.js的帮助文档,里面是各个函数的api,可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。
– Editor目录: 一个类似3D-max的简单编辑程序,它能创建一些三维物体。
– Examples目录: 一些很有趣的例子demo,可惜没有文档介绍。对图像学理解不深入的同学,学习成本非常高。
– Src目录: 源代码目录,里面是所有源代码。
– Test目录: 一些测试代码,基本没用。
– Utils目录: 存放一些脚本,python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
– .gitignore文件: git工具的过滤规则文件,没有用。
– CONTRIBUTING.md文件: 一个怎么报bug,怎么获得帮助的说明文档。
– LICENSE文件: 版权信息。
– README.md文件: 介绍three.js的一个文件,里面还包含了各个版本的更新内容列表。
3.功能概览
下面介绍下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
4. 一个典型的Three.js程序至少要包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及你在场景中创建的物体。
渲染器(Renerer)
渲染器将和Canvas元素进行绑定,在HTML中手动定义了id为mainCanvas的Canvas元素,那么Renderer可以这样写:
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById(‘mainCanvas’)
});
将背景色(用于清除画面的颜色)设置为黑色:
renderer.setClearColor(0x000000);
在定义了场景中的物体,设置好的照相机之后,渲染器就知道如何渲染出二维的结果了。这时候,我们只需要调用渲染器的渲染函数,就能使其渲染一次了。

renderer.render(scene, camera);

场景(Scene)
在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器。一般说,场景里没有很复杂的操作,在程序最开始的时候进行实例化,然后将物体添加到场景中即可。主要功能是添加对象、移除对象以及处理场景的children属性

var scene = new THREE.Scene();

照相机(Camera)
我们使用Three.js创建的场景是三维的,而通常情况下显示屏是二维的,那么三维的场景如何显示到二维的显示屏上呢?照相机就是这样一个抽 象,它定义了三维空间到二维屏幕的投影方式。
WebGL和Three.js使用的坐标系是右手坐标系。
立方体相机(CubeCamera)的 构造函数:
创建6个远景相机并渲染到1个WebGL渲染器目标(WebGLRenderTarget)Cube对象上。

//创建立方体相机
varcubeCamera=newTHREE.CubeCamera(1,100000,128);scene.add(cubeCamera);
CubeCamera( near, far, cubeResolution )

near — 近裁剪面距离
far — 远裁剪面距离
cubeResolution — 设置立方体的宽度
属性(Properties)
.renderTarget
生成的立方体纹理。
透视投影相机(PerspectiveCamera)的构造函数:
PerspectiveCamera(fov, aspect, near, far)
– fov 可视角度
– aspect 为width/height,通常设置为canvas元素的高宽比。
– near近端距离
– far远端距离

正交投影照相机(Orthographic Camera)的构造函数:
THREE.OrthographicCamera(left, right, top, bottom, near, far)

var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(50, 50, 50); //把 camera放在 XYZ 坐标为 (50, 50, 50) 的位置上
camera.lookAt(new THREE.Vector3(0, 0, 0));//朝向坐标原点
scene.add(camera);

为了保持照相机的横竖比例,需要保证(right – left)与(top – bottom)的比例与Canvas宽度与高度的比例一致。
near与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far的值设置得较大,具体值视场景中物体的位置等决定。
创建一个物体( 以创建一个x、y、z方向长度分别为1、2、3,并设置为红色的长方体为例)
var geometry = new THREE.CubeGeometry(1,2,3);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000;
});
var cube = new THREE.Mesh(geometry,material);
scene.add(cube);

– new THREE.CubeGeometry(); 表示调用一个几何体
– Cube : 立方体 Geometry : 几何;
– CubeGeometry是一个正方体或者长方体,究竟是什么,由它的3个参数所决定

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

width:立方体x轴的长度

height:立方体y轴的长度

depth:立方体z轴的深度,也就是长度

剩下的几个参数就要费解和复杂一些了,不过后面我们会自己来写一个立方体,到时候,你会更明白这些参数的意义,这里你可以将这些参数省略。

发表评论

电子邮件地址不会被公开。 必填项已用*标注