Three.js入门指南

WebGL太过底层，Threejs则没那么底层。Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。更高的封装程度往往意味着灵活性的牺牲，但是Three.js在这方面做得很好。几乎不会有WebGL支持而Three.js实现不了的情况。Threejs与WebGL的直观对比：https://www.ituring.com.cn/book/miniarticle/49782

这就是使用三维引擎的好处。

导入three.js

<script type="text/javascript" src="three.js"></script>

定义Canvas

<body onload="init()">
 <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>

完整版：

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
        <script src="js/three.js"></script>
        <script>
            window.onload = function(){ init( ); }

            function init(){
                var renderer = new THREE.WebGLRenderer({
                        canvas:document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);

                var scene = new THREE.Scene();

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

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

                renderer.render(scene,camera);
            }
            
        </script>
    </body>
</html>

Cameras（照相机，控制投影方式） Camera
OrthographicCamera
PerspectiveCamera
Core（核心对象）
BufferGeometry
Clock（用来记录时间）
EventDispatcher
Face3
Face4
Geometry
Object3D
Projector
Raycaster（计算鼠标拾取物体时很有用的对象）
Lights（光照）
Light
AmbientLight
AreaLight
DirectionalLight
HemisphereLight
PointLight
SpotLightLoaders（加载器，用来加载特定文件）
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
由此可以看到，Three.js功能是十分丰富的，一时间想全部掌握有困难。所以先从常用的功能入手，带领你入门Three.js。
 
在接下来的章节中，我们将会先详细介绍照相机、几何形状、材质、物体等入门级知识；然后介绍使用动画、模型导入、加入光照等功能；最后，对于学有余力的读者，我们将介绍着色器，用于更高级的图形渲染。
 
第二章 照相机
照相机分为正交投影照相机与透视投影照相机。使用透视投影照相机获得的结果是类似人眼的“近大远小”的效果。而使用正交投影照相机获得的结果就像数学课上老师画的效果，在三维空间内平行的线，投影到二维空间也是平行的。
一般来说，对于制图通常使用正交投影，而对于其他大多数应用，通常使用透视投影，因为这更接近人眼的观察效果。
 
正交投影照相机（Orthographic Camera）设置起来较为直观，它的构造函数是：
THREE.OrthographicCamera(left, right, top, bottom, near, far)
为了保持照相机的横竖比例，需要保证 (right - left) 与 (top - bottom) 的比例与 Canvas宽度与高度的比例一致。

透视投影照相机

第三章

3.3 自定义形状

对于Three.js没有提供的形状，可以提供自定义形状来创建。

由于自定义形状需要手动指定每个顶点位置，以及顶点连接情况，如果该形状非常复杂，程序员的计算量就会比较大。在这种情况下，建议在3ds Max之类的建模软件中创建模型，然后使用 Three.js 导入到场景中，这样会更高效方便。
自定义形状使用的是 Geometry 类，它是其他如 CubeGeometry、SphereGeometry 等几何形状的父类。
 
第四章 材质
材质（Material）是独立于物体顶点信息之外的与渲染效果相关的属性。
通过设置材质可以改变物体的颜色、纹理贴图、光照模式等。
本章将介绍基本材质、两种基于光照模型的材质，以及使用法向量作为材质。
除此之外，
本章还将介绍如何使用图像作为材质。
 
4.1 基本材质
对于基本材质，即使改变场景中的光源，使用该材质的物体也始终为颜色处处相同的效果。
当然，这不是很具有真实感，因此，接下来我们将介绍更为真实的光照模型：Lambert光照模型以及 Phong 光照模型。
 
4.2 Lambert材质
真实，但是只有在光照下使用。
 
4.3 Phong材质
 
第五章 网格
在学习了几何形状和材质之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（Mesh），网格是由顶点、边、面等组成的物体；其他物体包括线段（Line）、骨骼（Bone）、粒子系统（ParticleSystem）等。
 
第六章 动画
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/2008nmj/p/14276451.html