一：一个最简单的静态DEMO
//body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的，你可以手动在HTML的<body>部分中定义Canvas元素，或者让Three.js帮你生成。这两种选择一般没有多大差别，我们在此手动在HTML中定义： <body onload="init()"> <canvas id="mainCanvas" width="400px" height="300px" ></canvas> </body> <script> 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>
二：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 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 22 1.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 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