(二十五) Loader
CG | GC
1. 概述
本文主要介绍以下内容：
- 学会使用Obj Loader
- 学会使用GLTF Loader
- 学会使用Draco Loader
- 学会使用PLY Loader
- 学会使用STL Loader
- 学会使用FBX Loader
专栏代码地址：
2. Obj Loader
代码地址：
Loader，主要在于导入解析模型的几何数据和材质数据，分为OBJLoader和MTLLoader。
主要就是这段代码：
const mtlLoader = new MTLLoader();
mtlLoader.load(
'models/monkey.mtl',
(materials) => {
materials.preload();
const objLoader: OBJLoader = new OBJLoader();
objLoader.setMaterials(materials);
objLoader.load(
'models/monkey.obj',
(object) => {
scene.add(object);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log('An error happened');
}
);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log('An error happened');
}
);
3. GLTF Loader
gltf数据格式参考资料：
代码地址：
const loader = new GLTFLoader();
loader.load(
'models/monkey.glb',
function (gltf) {
// gltf.scene.traverse(function (child) {
// if ((<THREE.Mesh>child).isMesh) {
// let m = <THREE.Mesh>child
// m.receiveShadow = true
// m.castShadow = true
// }
// if ((<THREE.Light>child).isLight) {
// let l = <THREE.Light>child
// l.castShadow = true
// //l.shadow.bias = -.003
// l.shadow.mapSize.width = 2048
// l.shadow.mapSize.height = 2048
// }
// })
scene.add(gltf.scene);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
4. Draco Loader
代码地址：
主要代码：
var dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/js/libs/draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(
'models/monkey_compressed.glb',
function (gltf) {
gltf.scene.traverse(function (child) {
if ((<THREE.Mesh>child).isMesh) {
let m = <THREE.Mesh>child;
m.receiveShadow = true;
m.castShadow = true;
}
if ((<THREE.Light>child).isLight) {
let l = <THREE.Light>child;
l.castShadow = true;
l.shadow.bias = -0.003;
l.shadow.mapSize.width = 2048;
l.shadow.mapSize.height = 2048;
}
});
scene.add(gltf.scene);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
5. PLY Model Loader
代码地址：
主要代码：
let mesh: THREE.Mesh;
const loader = new PLYLoader();
loader.load(
'models/sean4.ply',
function (geometry) {
geometry.computeVertexNormals();
mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(-Math.PI / 2);
scene.add(mesh);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
6. STL Model Loader
代码地址：
主要代码：
const loader = new STLLoader();
loader.load(
'models/example.stl',
function (geometry) {
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
7. FBX Model Loader
代码地址：
主要代码：
let mixer: THREE.AnimationMixer;
let modelReady = false;
let animationActions: THREE.AnimationAction[] = new Array();
let activeAction: THREE.AnimationAction;
let lastAction: THREE.AnimationAction;
const fbxLoader: FBXLoader = new FBXLoader();
fbxLoader.load(
'models/vanguard_t_choonyung.fbx',
(object) => {
object.scale.set(0.01, 0.01, 0.01);
mixer = new THREE.AnimationMixer(object);
let animationAction = mixer.clipAction((object as any).animations[0]);
animationActions.push(animationAction);
animationsFolder.add(animations, 'default');
activeAction = animationActions[0];
scene.add(object);
//add an animation from another file
fbxLoader.load(
'models/vanguard@samba.fbx',
(object) => {
console.log('loaded samba');
let animationAction = mixer.clipAction((object as any).animations[0]);
animationActions.push(animationAction);
animationsFolder.add(animations, 'samba');
//add an animation from another file
fbxLoader.load(
'models/vanguard@bellydance.fbx',
(object) => {
console.log('loaded bellydance');
let animationAction = mixer.clipAction(
(object as any).animations[0]
);
animationActions.push(animationAction);
animationsFolder.add(animations, 'bellydance');
//add an animation from another file
fbxLoader.load(
'models/vanguard@goofyrunning.fbx',
(object) => {
console.log('loaded goofyrunning');
(object as any).animations[0].tracks.shift();
//console.dir((object as any).animations[0])
let animationAction = mixer.clipAction(
(object as any).animations[0]
);
animationActions.push(animationAction);
animationsFolder.add(animations, 'goofyrunning');
//console.dir(animationAction)
modelReady = true;
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
编辑于 2021-05-07 14:48
