// 存放骨骼动画的数组, 用来存放从多个外部模型中提取出来的骨骼动画
let ggURL = [];
// 当前需要显示的骨骼动画所在数组中的位置, 或者可以使用骨骼动画名称来确定需要播放那个动画
let ggURLNum = 0;
var gg = function (url){
var loader = new THREE.GLTFLoader();
loader.load(
url,
function (gltf) {
console.log("动画骨骼===============================================================================")
if (gltf.animations.length > 0) {
console.log(gltf.animations)
for(var i=0;i<gltf.animations.length;i++){
// 显示骨骼
let skeletonHelper = new THREE.SkeletonHelper(gltf.scene)
scene.add(skeletonHelper);
// 提取指定的骨骼动画,添加到数组中
ggURL.push(gltf.animations[i]);
}
console.log("动画骨骼===============================================================================")
},
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function (error) {
console.log('An error happened');
}
);
}
window.gg = gg;
// 动作数组
var meshHelper, mixer, action;
var flock;
const group = new THREE.Group()
function showModel(url) {
gg("https://sssssssss/xxxxx.glb");
gg("https://ssssss/xxxxx.glb");
console.log("ggURL========================================================================================")
console.log(ggURL)
console.log(ggURLNum)
console.log("ggURL========================================================================================")
flock = new THREE.AnimationObjectGroup;
// console.log("开始加载模型!!!!=========================================================")
var loader = new THREE.GLTFLoader();
loader.load(
url,
function (gltf) {
//======================================================================================================================
// 处理模型变黑
//======================================================================================================================
gltf.scene.traverse(function (child) {
if (child.isMesh) {
child.material.emissive = child.material.color;
child.material.emissiveIntensity = 1;
child.material.emissiveMap = child.material.map;
child.material.transparent = true;
child.isLineSegments = true;
child.material.wireframe = false;
var glbMix = new THREE.AnimationMixer(ggURL[ggURLNum]);
glbMix.clipAction(ggURL[ggURLNum])
}
});
//======================================================================================================================
// 处理模型变黑
//======================================================================================================================
// 创建相机锁定点
var ss = new THREE.Vector3(gltf.scene.position.x, gltf.scene.position.y, gltf.scene.position.z);
camera.lookAt(ss); //设置相机方向(指向的场景对象)
gltf.scene.position.y = -10;
// 模型等比放大
gltf.scene.scale.set(15, 15, 15);
group.add(gltf.scene)
scene.add(group);
flock.add(scene);
// 播放数组中指定的骨骼动画
mixer.clipAction(ggURL[ggURLNum]).play();
},
// 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');
}
);
}
threejs ,带骨骼的模型加载外部骨骼动画
于 2023-02-23 18:08:35 首次发布