Three.js API手册

动画
AnimationAction AnimationClip AnimationMixer AnimationObjectGroup AnimationUtils KeyframeTrack PropertyBinding PropertyMixer
动画 / 轨道
BooleanKeyframeTrack ColorKeyframeTrack NumberKeyframeTrack QuaternionKeyframeTrack StringKeyframeTrack VectorKeyframeTrack
音频
Audio AudioAnalyser AudioContext AudioListener PositionalAudio
摄像机
ArrayCamera Camera CubeCamera OrthographicCamera PerspectiveCamera StereoCamera
常量
Animation Core CustomBlendingEquation DrawModes Materials Renderer Textures
核心
BufferAttribute BufferGeometry Clock DirectGeometry EventDispatcher Face3 Geometry InstancedBufferAttribute InstancedBufferGeometry InstancedInterleavedBuffer InterleavedBuffer InterleavedBufferAttribute Layers Object3D Raycaster Uniform
核心 / BufferAttributes
BufferAttribute_Types
弃用列表
DeprecatedList
附件
Earcut ShapeUtils
附件 / 核心
Curve CurvePath Font Interpolations Path Shape ShapePath
附件 / 曲线
ArcCurve CatmullRomCurve3 CubicBezierCurve CubicBezierCurve3 EllipseCurve LineCurve LineCurve3 QuadraticBezierCurve QuadraticBezierCurve3 SplineCurve
附件 / 物体
ImmediateRenderObject
几何体
BoxBufferGeometry BoxGeometry CircleBufferGeometry CircleGeometry ConeBufferGeometry ConeGeometry CylinderBufferGeometry CylinderGeometry DodecahedronBufferGeometry DodecahedronGeometry EdgesGeometry ExtrudeBufferGeometry ExtrudeGeometry IcosahedronBufferGeometry IcosahedronGeometry LatheBufferGeometry LatheGeometry OctahedronBufferGeometry OctahedronGeometry ParametricBufferGeometry ParametricGeometry PlaneBufferGeometry PlaneGeometry PolyhedronBufferGeometry PolyhedronGeometry RingBufferGeometry RingGeometry ShapeBufferGeometry ShapeGeometry SphereBufferGeometry SphereGeometry TetrahedronBufferGeometry TetrahedronGeometry TextBufferGeometry TextGeometry TorusBufferGeometry TorusGeometry TorusKnotBufferGeometry TorusKnotGeometry TubeBufferGeometry TubeGeometry WireframeGeometry
辅助对象
ArrowHelper AxesHelper BoxHelper Box3Helper CameraHelper DirectionalLightHelper FaceNormalsHelper GridHelper PolarGridHelper PositionalAudioHelper HemisphereLightHelper PlaneHelper PointLightHelper RectAreaLightHelper SkeletonHelper SpotLightHelper VertexNormalsHelper
灯光
AmbientLight DirectionalLight HemisphereLight Light PointLight RectAreaLight SpotLight
灯光 / 阴影
DirectionalLightShadow LightShadow SpotLightShadow
加载器
AnimationLoader AudioLoader BufferGeometryLoader Cache CompressedTextureLoader CubeTextureLoader DataTextureLoader FileLoader FontLoader ImageBitmapLoader ImageLoader Loader LoaderUtils MaterialLoader ObjectLoader TextureLoader
加载器 / 管理器
DefaultLoadingManager LoadingManager
材质
LineBasicMaterial LineDashedMaterial Material MeshBasicMaterial MeshDepthMaterial MeshDistanceMaterial MeshLambertMaterial MeshMatcapMaterial MeshNormalMaterial MeshPhongMaterial MeshPhysicalMaterial MeshStandardMaterial MeshToonMaterial PointsMaterial RawShaderMaterial ShaderMaterial ShadowMaterial SpriteMaterial
数学库
Box2 Box3 Color Cylindrical Euler Frustum Interpolant Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spherical Triangle Vector2 Vector3 Vector4
数学库 / 插值
CubicInterpolant DiscreteInterpolant LinearInterpolant QuaternionLinearInterpolant
物体
Bone Group Line LineLoop LineSegments LOD Mesh Points Skeleton SkinnedMesh Sprite
渲染器
WebGLMultisampleRenderTarget WebGLRenderer WebGLRenderTarget WebGLRenderTargetCube
渲染器 / 着色器
ShaderChunk ShaderLib UniformsLib UniformsUtils
场景
Fog FogExp2 Scene
纹理贴图
CanvasTexture CompressedTexture CubeTexture DataTexture DataTexture3D DepthTexture Texture VideoTexture
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

LoadingManager

其功能时处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器,则会为加载器创建和使用默认全局实例加载器管理器 - 请参阅 DefaultLoadingManager.

一般来说,默认的加载管理器已足够使用了,但有时候也需要设置单独的加载器 - 例如,如果你想为对象和纹理显示单独的加载条。

例子

WebGL / loader / babylon
WebGL / loader / fbx
WebGL / loader / obj
WebGL / materials / reflectivity
WebGL / postprocesing / outline
WebGL / terrain / dynamic

下面的例子将介绍,如何使用加载管理器来跟踪 OBJLoader 的加载进度流程。

var manager = new THREE.LoadingManager(); 
manager.onStart = function ( url, itemsLoaded, itemsTotal ) { 
  console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); 
}; 

manager.onLoad = function ( ) { 
  console.log( 'Loading complete!'); 
}; 

manager.onProgress = function ( url, itemsLoaded, itemsTotal ) { 
  console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); 
}; 

manager.onError = function ( url ) { 
  console.log( 'There was an error loading ' + url ); 
}; 

var loader = new THREE.OBJLoader( manager ); 
loader.load( 'file.obj', function ( object ) { // } 
);

除了观察进度流程之外,还可以使用LoadingManager在加载期间覆写资源URL。当某资源来自拖拽事件、 WebSockets、WebRTC或其他API时,此方法可以有所帮助。下面显示了如何使用Blob URL加载内存模型的示例。

// 将文件拖入网页时创建的Blob或File对象。 
var blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3}; 
var manager = new THREE.LoadingManager(); 
// 使用URL回调初始化加载管理器。 
var objectURLs = []; 
manager.setURLModifier( ( url ) => { 
  url = URL.createObjectURL( blobs[ url ] ); 
  objectURLs.push( url ); 
  return url; 
} ); 

// 像通常一样加载,然后撤消blob URL 
var loader = new THREE.GLTFLoader( manager ); 
loader.load( 'fish.gltf', (gltf) => { 
  scene.add( gltf.scene ); 
  objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) ); 
});

构造方法

LoadingManager( onLoad : Function, onProgress : Function, onError : Function )

onLoad — (可选) 所有加载器加载完成后,将调用此函数。
onProgress — (可选) 当每个项目完成后,将调用此函数。
onError — (可选) 当一个加载器遇到错误时,将调用此函数。
创建一个新的 LoadingManager.

属性

# .onStart : Function

此换上咋加载开始时,被调用. 有如下参数:
url — 被加载的项的url。
itemsLoaded — 目前已加载项的个数。
itemsTotal — 总共所需要加载项的个数。

此方法默认时未定义。

# .onLoad : Function

所有的项加载完成后将调用此函数。默认情况下,此方法时未定义的,除非在构造函数中进行传递。

# .onProgress : Function

此方法加载每一个项,加载完成时进行调用。 有如下参数:
url — 被加载的项的url。
itemsLoaded — 目前已加载项的个数。
itemsTotal — 总共所需要加载项的个数。

默认情况下,此方法时未定义的,除非在构造函数中进行传递。

# .onError : Function

此方法将在任意项加载错误时,进行调用。 有如下参数:
url — 所加载出错误的项的url

默认情况下,此方法时未定义的,除非在构造函数中进行传递。

方法

# .setURLModifier ( callback : Function ) : null

callback — 设置URL修饰符成功时回调。使用url参数进行回调,并且必须返回 resolvedURL 。

如果设置了回调,则在发送请求之前将向每个资源URL传递回调。回调可以返回最初的URL,也可以返回新URL以覆盖加载行为。 此行为可用于从.ZIP、拖拽API和数据URI中加载资源文件。

# .resolveURL ( url : String ) : String

url — 所要加载的url

给定URL,使用URL修饰符回调(如果有)并返回已解析的URL。如果未设置URL修饰符,则返回原始URL。

Note: The following methods are designed to be called internally by loaders. You shouldn't call them directly.

# .itemStart ( url : String ) : null

url — 所要加载的url

任何使用管理器的加载器都会调用此方法, 当加载器需要开始加载URL时。

# .itemEnd ( url : String ) : null

url — 所要加载的url

任何使用管理器的加载器都会调用此方法, 当加载器需要加载URL结束时。

# .itemError ( url : String ) : null

url — 所要加载的url

任何使用管理器的加载器都会调用此方法, 当加载器出现加载错误时。

源 -

src/loaders/LoadingManager.js