Aframe gltf材质替代停止动画混合器
我对gltf模型的一个问题非常感兴趣。如果尝试覆盖gltf的材质,动画将停止。我认为这与覆盖的更新功能和动画混合器的勾号功能有一定的关系,但我自己还没有解决这个问题 我希望有人能告诉我为什么会发生这种情况。 下面是一个活生生的例子: 非常感谢。这是代码本身。注释部分是材质的替代部分。如果取消注释,将加载新材质,但动画将停止:Aframe gltf材质替代停止动画混合器,aframe,webvr,gltf,Aframe,Webvr,Gltf,我对gltf模型的一个问题非常感兴趣。如果尝试覆盖gltf的材质,动画将停止。我认为这与覆盖的更新功能和动画混合器的勾号功能有一定的关系,但我自己还没有解决这个问题 我希望有人能告诉我为什么会发生这种情况。 下面是一个活生生的例子: 非常感谢。这是代码本身。注释部分是材质的替代部分。如果取消注释,将加载新材质,但动画将停止: AFRAME.registerComponent("fefo", { init: function() {
AFRAME.registerComponent("fefo", {
init: function() {
var texture = new THREE.TextureLoader().load( 'models/static.png' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 20, 20 );
this.material = new THREE.MeshToonMaterial({
bumpMap:texture,
bumpScale:0.03,
color : 0xffffff
});
this.el.addEventListener('model-loaded', () => this.update());
var el = this.el;
setTimeout(()=>{
var model = el.getObject3D('mesh')
this.mixer = new THREE.AnimationMixer(model);
var clips = model.animations || (model.geometry || {}).animations ||
[];
console.log(this.mixer)
console.log(el)
console.log(clips[0])
const action = this.mixer.clipAction(clips[0], model);
action.setDuration(10).setLoop(THREE.LoopRepeat).play();
console.log(action)
}, 3000)
},
/////////////////HERE I TRY TO OVERRIDE THE MATERIAL, BUT IF I DO, ANIMATION STOPS
update: function () {
// object = this.el.getObject3D('mesh');
// if (!object) return;
// object.traverse((node) => {
// if (node.isMesh) node.material = this.material;
// });
},
tick: function (t, dt) {
if (this.mixer && !isNaN(dt)) this.mixer.update(dt / 1000);
}
})
重要的是要记住,three.js中的材质实际上代表一个对象,而不仅仅是对象的视觉“外观”。MeshToonMaterial扩展并继承与动画相关的几个特性,这些特性需要保留以使动画正常工作:
newMaterial.skinning = oldMaterial.skinning;
newMaterial.morphTargets = oldMaterial.morphTargets;
newMaterial.morphNormals = oldMaterial.morphNormals;
在这种情况下,我认为重要的只是
.skinning
属性,因为模型使用骨架。非常感谢您提供了信息丰富的答案。事实上,只需添加这个.material.skinning=true;在更新函数中解决了这个问题