JSRUN 用代码说话

GLTF加载器(GLTFLoader)

编辑教程

GLTF加载器(GLTFLoader)

用于载入glTF 2.0资源的加载器。

glTF(gl传输格式)是一种开放格式的规范 (open format specification), 用于更高效地传输、加载3D内容。该类文件以JSON(.glft)格式或二进制(.glb)格式提供, 外部文件存储贴图(.jpg、.png)和额外的二进制数据(.bin)。一个glTF组件可传输一个或多个场景, 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

扩展

GLTFLoader支持下列glTF 2.0扩展(glTF 2.0 extensions):

  • KHR_draco_mesh_compression
  • KHR_materials_pbrSpecularGlossiness
  • KHR_materials_unlit
  • KHR_mesh_quantization
  • KHR_lights_punctual1
  • KHR_texture_transform2
  • MSFT_texture_dds

1需要physicallyCorrectLights被启用。

2支持UV变换,但存在一些重要的限制。使用第一个UV槽应用到纹理的变换(除aoMap和lightMap外的所有纹理)必须共享相同的变换,或者根本不进行变换。

aoMap 和 lightMap 纹理不能被变换。每个材质最多只能使用一次变换。 每次对使用具有唯一变换的纹理都会导致一次额外的GPU纹理上传。 请参阅#13831 和 #12788。

示例

// Instantiate a loader
var loader = new THREE.GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );

// Load a glTF resource
loader.load(
    // resource URL
    'models/gltf/duck/duck.gltf',
    // called when the resource is loaded
    function ( gltf ) {

        scene.add( gltf.scene );

        gltf.animations; // Array<THREE.AnimationClip>
        gltf.scene; // THREE.Scene
        gltf.scenes; // Array<THREE.Scene>
        gltf.cameras; // Array<THREE.Camera>
        gltf.asset; // Object

    },
    // called while loading is progressing
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);

浏览器兼容性

GLTFLoader 依赖 ES6 Promises, 这一特性不支持IE11。若要在IE11中使用该加载器,你必须引入polyfill(include a polyfill) 来提供一个Promise的替代方案。

纹理

纹理中包含的颜色信息(.map, .emissiveMap, 和 .specularMap)在glTF中总是使用sRGB颜色空间,而顶点颜色和材质属性(.color, .emissive, .specular) 则使用线性颜色空间。在典型的渲染工作流程中,纹理会被渲染器转换为线性颜色空间,进行光照计算,然后最终输出会被转换回 sRGB 颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理,否则请在使用glTF的时候将WebGLRenderer进行如下配置:

renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;

假设渲染器的配置如上所示,则GLTFLoader将可以正确地自动配置从.gltf或.glb文件中引用的纹理。 当从外部加载纹理(例如,使用TextureLoader)并将纹理应用到glTF模型,则必须给定对应的颜色空间与朝向:

// If texture is used for color information, set colorspace.
texture.encoding = THREE.sRGBEncoding;

// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
texture.flipY = false;

自定义扩展

来自未知扩展的元数据会被保存到Object3D、Scene和Material实例中上的“.userData.gltfExtensions”, 或被附加到 response “gltf”对象。示例:

loader.load('foo.gltf', function ( gltf ) {

    var scene = gltf.scene;

    var mesh = scene.children[ 3 ];

    var fooExtension = mesh.userData.gltfExtensions.EXT_foo;

    gltf.parser.getDependency( 'bufferView', fooExtension.bufferView )
        .then( function ( fooBuffer ) { ... } );

} );

构造函数

GLTFLoader( manager : LoadingManager )

manager — 该加载器将要使用的 loadingManager 。默认为 THREE.DefaultLoadingManager。

创建一个新的GLTFLoader。

属性

共有属性请参见其基类Loader。

方法

共有方法请参见其基类Loader。

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

  • url — 包含有.gltf/.glb文件路径/URL的字符串。
  • onLoad — 加载成功完成后将会被调用的函数。该函数接收parse所返回的已加载的JSON响应。
  • onProgress — (可选)加载正在进行过程中会被调用的函数。其参数将会是XMLHttpRequest实例,包含有总字节数.total与已加载的字节数.loaded。
  • onError — (可选)若在加载过程发生错误,将被调用的函数。该函数接收error来作为参数。

开始从url加载,并使用解析过的响应内容调用回调函数。

.setDRACOLoader ( dracoLoader : DRACOLoader ) : null

dracoLoader — THREE.DRACOLoader的实例,用于解码使用KHR_draco_mesh_compression扩展压缩过的文件。

请参阅readme来了解Draco及其解码器的详细信息。

.setDDSLoader ( ddsLoader : DDSLoader ) : null

ddsLoader — THREE.DDSLoader的实例,用于加载使用MSFT_TEXTURE_DDS扩展压缩过的纹理。

.parse ( data : ArrayBuffer, path : String, onLoad : Function, onError : Function ) : null

  • data — 需要解析的glTF文件,值为一个ArrayBuffer或JSON字符串。
  • path — 用于找到后续glTF资源(如纹理和.bin数据文件)的基础路径。
  • onLoad — 解析成功完成后将会被调用的函数。
  • onError — (可选)若在解析过程发生错误,将被调用的函数。该函数接收error来作为参数。

解析基于glTF的ArrayBuffer或JSON字符串,并在完成后触发onLoad回调。onLoad的参数将是一个包含有已加载部分的object:.scene、 .scenes、 .cameras、 .animations 和 .asset。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟