three.js基本概念##
一個典型的Three.js程序至少要包括渲染器(Renderer)、場景(Scene)、照相機(Camera),以及你在場景中創建的物體。
1.渲染器(Renderer)####
//渲染器將和Canvas元素進行綁定,如果之前在HTML中手動定義了id為mainCanvas的Canvas元素,那么Renderer可以這樣寫:
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
//而如果想要Three.js生成Canvas元素,在HTML中就不需要定義Canvas元素,在JavaScript代碼中可以這樣寫:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
2.場景(Scene)
在Three.js中添加的物體都是添加到場景中的,因此它相當于一個大容器。一般說,場景里沒有很復雜的操作,在程序最開始的時候進行實例化,然后將物體添加到場景中即可。
var scene = new THREE.Scene();
3.照相機(Camera)
在介紹照相機設置前,我們先來簡單了解下坐標系。WebGL和Three.js使用的坐標系是右手坐標系,看起來就是這樣的:
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
helloword代碼:
function init() {
// renderer
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000); // black
// scene
var scene = new THREE.Scene();
// camera
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
// a cube in the scene
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
// render
renderer.render(scene, camera);
}
學習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