1. 准备工作
官方网站:Three.js
1.1 下载 Three.js
github 代码 : Three.js
1.2 引用
1 | <script type="text/javascript" src="three.js"></script> |
属性和方法都在 THREE 全局变量中
2. Hello, world!
典型的 Three.js 程序必须包含渲染器 ( Renderer ) 、场景 ( Scene ) 、照相机 ( Camera ), 以及在场景中创建的物体。
To actually be able to display anything with three.js, we need three things: scene, camera and renderer, so that we can render the scene with camera.
步骤:
- 创建渲染器
- 创建场景
- 创建照相机
- 创建物体,添加到场景中
- 渲染场景到 DOM 上
2.1 渲染器 Renderer
渲染器与 DOM 绑定,其中 id
为 mainCanvas
的 dom 需要自己创建
1 | var renderer = new THREE.WebGLRenderer({ |
另外,可以不用创建 DOM,代码示例如下:
1 | var renderer = new THREE.WebGLRenderer(); |
2.2 场景 Scene
物体需要添加到场景中,场景没有很复杂的操作,相当于一个容器,在程序开始时候进行实例化即可。
1 | var scene = new THREE.Scene(); |
2.3 照相机 Camera
WebGL 和 Three.js 都是使用的 右手坐标系 (右边的):
1 | var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); |
2.4 物体 Object
相对长度比为 1 : 2 : 3 的长方体
1 | var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), |
2.5 渲染 render
从照相机的视角,将场景渲染到DOM上
1 | renderer.render(scene, camera); |
2.6 完整代码
1 |
|
效果如下:
3. Three.js 概览
类 | 具体实现 |
---|---|
Animation动画 | AnimationAction、 AnimationClip、 AnimationMixer、 AnimationObjectGroup、 AnimationUtils、 KeyframeTrack、 PropertyBinding、 PropertyMixer |
Animation / Tracks动画 / 轨道 | BooleanKeyframeTrack、 ColorKeyframeTrack、 NumberKeyframeTrack、 QuaternionKeyframeTrack、 StringKeyframeTrack、 VectorKeyframeTrack |
Audio音频 | Audio、 udioAnalyser、 dioContext、 ioListener、 tionalAudio |
Cameras摄像机 | ArrayCamera、 Camera、 CubeCamera、 OrthographicCamera、 PerspectiveCamera、 StereoCamera |
Constants常量 | Animation、 Core、 CustomBlendingEquation、 Materials、 Renderer、 Textures |
Core核心 | BufferAttribute、 BufferGeometry、 Clock、 EventDispatcher、 GLBufferAttribute、 InstancedBufferAttribute、InstancedBufferGeometry、 InstancedInterleavedBuffer、 InterleavedBuffer、InterleavedBufferAttribute、 Layers、 Object3D、 Raycaster、 Uniform |
Core核心 / BufferAttributes | BufferAttribute Types |
Extras附件 | Earcu、 ImageUtil、 PMREMGenerato、 ShapeUtil |
Extras附件 / Core核心 | Curve、 CurvePath、 Font、 Interpolations、 Path、 Shape、 ShapePath |
Extras附件 / Curves曲线 | ArcCurve、 CatmullRomCurve3、 CubicBezierCurve、 CubicBezierCurve3、EllipseCurve、 LineCurve、 LineCurve3、 QuadraticBezierCurve、 QuadraticBezierCurve3、 SplineCurve |
Extras附件 / Objects物体 | ImmediateRenderObject |
Geometries几何体 | BoxGeometry、 CircleGeometry、 ConeGeometry、 CylinderGeometry、 DodecahedronGeometry、EdgesGeometry、 ExtrudeGeometry、 IcosahedronGeometry、 LatheGeometry、 OctahedronGeometry、ParametricGeometry、 PlaneGeometry、 PolyhedronGeometry、 RingGeometry、 ShapeGeometry、SphereGeometry、 TetrahedronGeometry、 TextGeometry、 TorusGeometry、 TorusKnotGeometry、 TubeGeometry、 WireframeGeometry |
Helpers辅助对象 | ArrowHelper、 AxesHelper、 BoxHelper、 Box3Helper、 CameraHelper、 DirectionalLightHelper、GridHelper、 PolarGridHelper、 HemisphereLightHelper、 PlaneHelper、 PointLightHelper、 SkeletonHelper、 SpotLightHelper |
Lights灯光 | AmbientLight、 AmbientLightProbe、 DirectionalLight、 HemisphereLight、 HemisphereLightProbe、 Light、 LightProbe、 PointLight、 RectAreaLight、 SpotLight |
Lights灯光 / Shadows阴影 | LightShadow、 PointLightShadow、 DirectionalLightShadow、 SpotLightShadow |
Loaders加载器 | AnimationLoader、 AudioLoader、 BufferGeometryLoader、 Cache、 CompressedTextureLoader、 CubeTextureLoader、 DataTextureLoader、FileLoader、 FontLoader、 ImageBitmapLoader、 ImageLoader、 Loader、 LoaderUtils、 MaterialLoader、 ObjectLoader、 TextureLoader |
Loaders加载器 / Managers管理器 | DefaultLoadingManager、 LoadingManager |
Materials材质 | LineBasicMaterial、 LineDashedMaterial、 Material、 MeshBasicMaterial、 MeshDepthMaterial、 MeshDistanceMaterial、 MeshLambertMaterial、MeshMatcapMaterial、 MeshNormalMaterial、 MeshPhongMaterial、 MeshPhysicalMaterial、 MeshStandardMaterial、 MeshToonMaterial、 PointsMaterial、RawShaderMaterial、 ShaderMaterial、 ShadowMaterial、 SpriteMaterial |
Math数学库 | Box2、 Box3、 Color、 Cylindrical、 Euler、 Frustum、 Interpolant、 Line3、 MathUtils、 Matrix3、 Matrix4、Plane、 Quaternion、 Ray、 Sphere、 Spherical、 SphericalHarmonics3、 Triangle、 Vector2、 Vector3、 Vector |
Math数学库 / Interpolants插值 | CubicInterpolant、 DiscreteInterpolant、 LinearInterpolant、 QuaternionLinearInterpolant |
Objects物体 | Bone、 Group、 InstancedMesh、 Line、 LineLoop、 LineSegments、 LOD、 Mesh、 Points、 Skeleton、 SkinnedMesh、 Sprite |
Renderers渲染器 | WebGLMultipleRenderTargets、 WebGLMultisampleRenderTarget、 WebGLRenderer、 WebGL1Renderer、 WebGLRenderTarget、 WebGLCubeRenderTarget |
Renderers渲染器 / Shaders着色器 | ShaderChunk、 ShaderLib、 UniformsLib、 UniformsUtils |
Renderers渲染器 / WebXR | WebXRManager |
Scenes场景 | Fog、 FogExp2、 Scene |
Textures纹理贴图 | CanvasTexture、 CompressedTexture、 CubeTexture、 DataTexture、 DataTexture2DArray、 DataTexture3D、 DepthTexture、 Texture、 VideoTexture |
发布时间: 2021-08-23
最后更新: 2023-05-09
本文标题: 第一个 Three.js 程序!
本文链接: https://zx1001011.github.io/2021/08/23/First-Three.js/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
![知识共享许可协议](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)