目录
- 一、cubeTextureLoader与gltfLoader对比
- 二、回调函数
- 1. 回调函数 命名函数形式
- 2. 回调函数 匿名函数形式
- 3. 回调函数 箭头函数形式
同样是Three.js的加载器，为什么cubeTextureLoader不用写回调函数，而gltfLoader需要回调函数呢？
/** * Environment map */constenvironmentMap=cubeTextureLoader.load(['/textures/environmentMaps/0/px.jpg','/textures/environmentMaps/0/nx.jpg','/textures/environmentMaps/0/py.jpg','/textures/environmentMaps/0/ny.jpg','/textures/environmentMaps/0/pz.jpg','/textures/environmentMaps/0/nz.jpg'])scene.background=environmentMap/** * Models */gltfLoader.load('/models/FlightHelmet/glTF/FlightHelmet.gltf',(gltf)=>{gltf.scene.scale.set(10,10,10)gltf.scene.position.set(0,-4,0)gltf.scene.rotation.y=Math.PI*0.5scene.add(gltf.scene)})一、cubeTextureLoader与gltfLoader对比
| cubeTextureLoader | gltfLoader | |
|---|---|---|
| 数据介绍 | cubeTexture 是一种特殊的纹理，由6个2D图像构成，分别对应立方体的六个面。 | gltf是一种针对3D场景和模型的现代格式，旨在高效地传递和加载3D内容，具有紧凑的文件结构。 |
| 加载数据复杂程度 | cubeTextureLoader 加载6张图片，每张图片都是标准的、浏览器原生支持的图像格式（JPG、PNG等）。整个过程是线性的、可预测的。 | gltfLoader 加载的 .gltf、.glb文件是一个容器，里面可能包含几何体、材质、动画，以及一个可嵌套多层、相互引用的文件列表。这一过程相对复杂、未知。 |
| 返回值 | cubeTexture实例 | 没有有意义的返回值，gltf.scene等必须通过回调函数调用 |
Three.js中的加载器与资源管理：构建丰富3D场景的关键
二、回调函数
1. 回调函数 命名函数形式
functiongiveNumber(onNumber){constnumber=42;onNumber(number);}functionprintNumber(value){console.log("结果是"+value);}giveNumber(printNumber);- giveNumber 调用 printNumber，printNumber 作为参数传入。
- 在 giveNumber 函数中，声明常数 number，其值为42。onNumber 作为形参，接收传入的 printNumber。onNumber(number) 等价于 printNumber(number)。
- 哪一个是回调函数？ printNumber。
- 哪一个是宿主函数？ giveNumber。
- 将 printNumber 的调用权交给 giveNumber，这是回调函数的特点之一：控制反转。
2. 回调函数 匿名函数形式
functiongiveNumber(onNumber){constnumber=42;onNumber(number);}giveNumber(function(value){console.log("结果是"+value);})3. 回调函数 箭头函数形式
functiongiveNumber(onNumber){constnumber=42;onNumber(number);}giveNumber((value)=>{console.log("结果是"+value);})Javascript: 带名，匿名，箭头函数重要区别
