Lil-El / threejs

threejs 示例。

Three.js

• three.js文档
• three.js
• three.js

step

1. start
2. docs\
3. examples

threejs docs category

动画

• AnimationAction
• AnimationClip
• AnimationMixer
• AnimationObjectGroup
• AnimationUtils
• KeyframeTrack
• PropertyBinding
• PropertyMixer
• 轨道
  • BooleanKeyframeTrack
  • ColorKeyframeTrack
  • NumberKeyframeTrack
  • QuaternionKeyframeTrack
  • StringKeyframeTrack
  • VectorKeyframeTrack

音频

• Audio
• AudioAnalyser
• AudioContext
• AudioListener
• PositionalAudio

摄像机

• ArrayCamera
• √ Camera: 相机: near最小为0.1，near和far之间的是可视区域；投影时，需要调整相机尺寸（top、bottom、left、right）并将物体放在可视范围之内(near/far中间) 例子
• CubeCamera
• √ OrthographicCamera: 正交相机，可以展示所有物体，不能透视到物体之后；例子
• √ PerspectiveCamera: 透视相机
• StereoCamera

常量 x

例如：Material中通过常量设置渲染哪一面THREE.FrontSide等。 Animation Core CustomBlendingEquation √ Materials: Side面 Renderer √ Textures: 纹理常量; RepeatWrapping

核心

• √ BufferAttribute: 用于BufferGeometry设置属性值（顶点、颜色等）
• √ BufferGeometry: geometry的父类
• Clock: 时间相关
• EventDispatcher: 事件相关，可以自定义obj的事件监听函数
• GLBufferAttribute
• InstancedBufferAttribute
• InstancedBufferGeometry
• InstancedInterleavedBuffer
• InterleavedBuffer
• InterleavedBufferAttribute
• Layers
• √ Object3D: thing的父类
• Raycaster: 光线投射，实现鼠标拾取功能
• Uniform
• √ BufferAttributes
  • √ BufferAttribute Types: Float32BufferAttribute, Int32BufferAttribute, Uint8BufferAttribute等许多都继承自BufferAttribute；会将array转换为对应的Type Array

附件

• Earcut
• ImageUtils
• PMREMGenerator
• ShapeUtils
• 核心
  • √ Curve: 众多曲线类的父类
  • √ CurvePath
  • Interpolations
  • √ Path: Path
  • √ Shape: Shape
  • ShapePath
• 曲线
  • √ ArcCurve: EllipseCurve的别名，相较于ellipse，arc的x和y的radius是一样的
  • CatmullRomCurve3
  • CubicBezierCurve: 贝塞尔曲线
  • CubicBezierCurve3
  • √ EllipseCurve: 椭圆曲线
  • √ LineCurve: 二维线段
  • √ LineCurve3: 三维线段
  • QuadraticBezierCurve
  • QuadraticBezierCurve3
  • SplineCurve

几何体

• √ BoxGeometry: 立方缓冲几何体
• √ CircleGeometry: 圆形缓冲几何体
• √ ConeGeometry: 圆锥缓冲几何体
• √ CylinderGeometry: 圆柱缓冲几何体
• √ DodecahedronGeometry: 十二面缓冲几何体
• √ EdgesGeometry: 边缘几何体(用作辅助对象来查看其他geometry的边缘)
• √ ExtrudeGeometry: 挤压缓冲几何体(根据一个形状路径，生成一个几何体)
• √ IcosahedronGeometry: 二十面缓冲几何体
• √ LatheGeometry: 车削缓冲几何体
• √ OctahedronGeometry: 八面缓冲几何体
• √ PlaneGeometry: 平面缓冲几何体
• √ PolyhedronGeometry: 缓冲几何体(是DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry的父类)
• √ RingGeometry: 圆环缓冲几何体
• √ ShapeGeometry: 形状缓冲几何体
• √ SphereGeometry: 球缓冲几何体
• √ TetrahedronGeometry: 四面缓冲几何体
• √ TorusGeometry: 圆环缓冲几何体
• √ TorusKnotGeometry: 圆环缓冲扭结几何体
• √ TubeGeometry: 管道缓冲几何体
• √ WireframeGeometry: 网格几何体: 辅助物体, 对一个geometry以线框的形式进行查看

辅助对象

• √ ArrowHelper: 箭头: 线段和椎体可以设置为物体
• √ AxesHelper: 三维空间的坐标轴
• √ BoxHelper: 将物体使用box包裹起来 例子
• Box3Helper
• √ CameraHelper: 相机辅助 例子
• √ DirectionalLightHelper: 平行光辅助线
• √ GridHelper: 网格辅助线: 设置Material的depthWrite为false，可以使线不会抖动
• PolarGridHelper
• √ HemisphereLightHelper: 模拟半球形光源
• √ PlaneHelper: 模拟平面 Plane 的辅助对象, 传入Math.Plane可以生成平面
• √ PointLightHelper: 点光源辅助线
• SkeletonHelper
• SpotLightHelper

灯光

• √ AmbientLight: 均应照亮场景的物体；没有方向，没有阴影
• AmbientLightProbe
• √ DirectionalLight: 平行光
• √ HemisphereLight: 半球光，将光源放置于场景之上
• HemisphereLightProbe
• Light
• LightProbe
• √ PointLight: 点光源
• RectAreaLight
• SpotLight
• 阴影
  • LightShadow
  • √ PointLightShadow: 点光源投影，将物体放在光圈内
  • √ DirectionalLightShadow: 平行光投影，将物体放在投影相机的可视范围内
  • SpotLightShadow

加载器

• AnimationLoader
• AudioLoader
• BufferGeometryLoader
• Cache
• CompressedTextureLoader
• √ CubeTextureLoader
• DataTextureLoader
• FileLoader
• ImageBitmapLoader
• ImageLoader: 内部使用FileLoader来加载文件，并被 CubeTextureLoader、ObjectLoader、TextureLoader所使用。
• Loader: 加载器的基类。
• LoaderUtils
• MaterialLoader
• ObjectLoader
• √ TextureLoader: 内部使用ImageLoader来加载文件
• 管理器
  • DefaultLoadingManager
  • LoadingManager

材质

• √ LineBasicMaterial: 直线
• √ LineDashedMaterial: 虚线
• √ Material
• √ MeshBasicMaterial: 基础的网格材质，不受光照的影响。
• √ MeshPhongMaterial: 可以反光的Material材质
• √ MeshDepthMaterial: 按深度绘制几何体的材质。深度基于相机远近平面。白色最近，黑色最远。
• √ MeshDistanceMaterial: 用于使用PointLight来实现阴影映射
• MeshLambertMaterial: 一种非光泽表面的材质，没有镜面高光。
• MeshMatcapMaterial
• MeshNormalMaterial
• MeshPhysicalMaterial
• MeshStandardMaterial
• MeshToonMaterial: 卡通阴影
• √ PointsMaterial: 点物体的材质
• RawShaderMaterial
• ShaderMaterial
• ShadowMaterial
• SpriteMaterial

数学库

• Box2
• Box3
• √ Color: 颜色生成，计算；new THREE.Color() * Math.random();, Color1.equals(Color2)
• Cylindrical
• Euler
• Frustum
• Interpolant
• Line3
• √ MathUtils: 不需要new。可以生成随机数、度数与弧度转换、生成UUID、线性差值等
• √ Matrix3: 矩阵。坐标的平移、转换、旋转。
• √ Matrix4: 矩阵。坐标的平移、转换、旋转。
• √ Plane: 构建无限延伸的二维平面。可以判断与线段、box、球等物体是否相交
• Quaternion
• Ray
• Sphere
• Spherical
• SphericalHarmonics3
• Triangle
• √ Vector2
• √ Vector3: 三维空间的点坐标，可以表示坐标、向量等。能计算点的距离，向量，应用旋转等操作；单位向量
• Vector4
• 插值
  • CubicInterpolant
  • DiscreteInterpolant
  • LinearInterpolant
  • QuaternionLinearInterpolant

物体

• √ Group
• √ InstancedMesh: 实例化网格；用来渲染大量具有相同geometry和material的物体，提升性能; 例子
• √ Line
• √ LineLoop: 将第一个、最后一个点连接起来
• √ LineSegments: 线段; 在若干对的顶点之间绘制的一系列的线。(也可是辅助查看物体的顶点)
• √ Mesh
• √ Points: 点; 绘制BoxGeometry时，THREE.Points会渲染box的8个点；传入THREE.BufferGeometry可以传入任何点
• LOD: 多细节层次（LOD，Levels of Detail） TODO:
• √ Bone: 骨骼: 几乎和空白的Object3D相同。是skeleton的一部分，由SkinnedMesh依次使用；
• √ Skeleton: 骨架（包含了Bone）
• √ SkinnedMesh: 知识点较多，查看该文件
• Sprite

渲染器

• WebGLMultipleRenderTargets
• WebGLRenderer
• WebGL1Renderer
• WebGLRenderTarget
• WebGLCubeRenderTarget
• 着色器
  • ShaderChunk
  • ShaderLib
  • UniformsLib
  • UniformsUtils
• WebXR
  • WebXRManager

场景

• √ Fog: 雾
• √ FogExp2: 雾
• √ Scene: 场景

纹理贴图

• √ CanvasTexture: 从Canvas元素中创建纹理贴图。
• CompressedTexture
• CubeTexture: 立方纹理，由6张图片组成。对应了CubeTextureLoader
• DataArrayTexture
• Data3DTexture
• DataTexture
• DepthTexture
• FramebufferTexture
• Source
• Texture
• VideoTexture

examples

动画

• CCDIKSolver
• MMDAnimationHelper
• MMDPhysics

控制

• √ DragControls
• √ FirstPersonControls: 是fly的另一种实现
• √ FlyControls
• √ OrbitControls
• PointerLockControls: 锁定鼠标; TODO:
• √ TrackballControls: 这个控制器在up方向可以一直转动; 创建控制器需要在dom创建之后进行
• √ TransformControls: 变换控制，可以修改物体的位置、旋转等。

几何体

• ConvexGeometry
• DecalGeometry
• ParametricGeometry
• TextGeometry

辅助对象

• LightProbeHelper
• PositionalAudioHelper
• RectAreaLightHelper
• VertexNormalsHelper
• VertexTangentsHelper

灯光

• LightProbeGenerator

后期处理

• EffectComposer

加载器

• DRACOLoader
• FontLoader
• GLTFLoader
• MMDLoader
• MTLLoader
• OBJLoader
• PCDLoader
• PDBLoader
• PRWMLoader
• SVGLoader
• TGALoader

物体 x

• Lensflare: 镜头光晕, 和light一起使用

导出器 x

• ColladaExporter
• GLTFExporter
• PLYExporter

数学库 x

• LookupTable
• MeshSurfaceSampler
• OBB
• QuickHull
• Face
• HalfEdge
• ConvexHull
• VertexNode
• VertexList

渲染器 x

• CSS2DRenderer
• CSS3DRenderer
• SVGRenderer

实用工具 x

• BufferGeometryUtils
• SceneUtils
• SkeletonUtils

动画 》音频 》合成

wireframe、grid、line等线条发虚，可以material设置opacity，参考(/docs/light/light.html) wireframe、grid、line等线条发虚，可以WebGLRender设置抗锯齿antialias: true，参考(/docs/material/1.MeshDept.html)