Need advice on how to use 2 separate files GLB 3D model and GLB animation in a-frame (threejs)
It is necessary to explain to us how we can use animations from the following resources
https://www.mixamo.com
But these recommendations don’t work. Therefore, we need instructions on how we can use animations from mixamo, readyplayer.me, and the babylon,js example.
// ////////////////////////////
// DYNAMICALLY RIGGING AVATAR MESH
// ////////////////////////////
const LoopMode = {
once: THREE.LoopOnce,
repeat: THREE.LoopRepeat,
pingpong: THREE.LoopPingPong,
}
function wildcardToRegExp(s) {
return new RegExp(^${s.split(/\*+/).map(regExpEscape).join('.*')}$)
}
function regExpEscape(s) {
return s.replace(/[|\{}()^$+*?.]/g, ‘\$&’)
}
const animationRigComponent = {
schema: {
remoteId: {
default: ‘animated’,
type: ‘string’,
},
clip: {
default: ‘*’,
type: ‘string’,
},
duration: {
default: 0,
type: ‘number’,
},
clampWhenFinished: {
default: !1,
type: ‘boolean’,
},
crossFadeDuration: {
default: 0,
type: ‘number’,
},
loop: {
default: ‘repeat’,
oneOf: Object.keys(LoopMode),
},
repetitions: {
default: 1 / 0,
min: 0,
},
timeScale: {
default: 1,
},
},
init() {
this.model = null,
this.remoteModel = null,
this.mixer = null,
this.activeActions =
let {remoteId} = this.data
remoteId = remoteId.charAt(0) === ‘#’ ? remoteId.slice(1) : remoteId
const remoteEl = document.getElementById(remoteId)
remoteEl || console.error(‘ramx: Remote entity not found. Pass the ID of the entity, not the model.’),
this.model = this.el.getObject3D(‘mesh’),
this.remoteModel = remoteEl.getObject3D(‘mesh’)
const tryToLoad = () => {
this.model && this.remoteModel && this.load()
}
this.model ? tryToLoad() : this.el.addEventListener('model-loaded', (e) => {
this.model = e.detail.model,
tryToLoad(),
console.log(this.model.animations)
}),
this.remoteModel ? tryToLoad() : remoteEl.addEventListener('model-loaded', (e) => {
this.remoteModel = e.detail.model,
tryToLoad()
})
},
load() {
const {el} = this
console.log(this.remoteModel)
this.model.animations = […this.remoteModel.animations],
this.mixer = new THREE.AnimationMixer(this.model),
this.mixer.addEventListener(‘loop’, (e) => {
el.emit(‘animation-loop’, {
action: e.action,
loopDelta: e.loopDelta,
})
}),
this.mixer.addEventListener(‘finished’, (e) => {
el.emit(‘animation-finished’, {
action: e.action,
direction: e.direction,
})
}),
this.data.clip && this.update({})
console.log * (this.data)
},
remove() {
this.mixer && this.mixer.stopAllAction()
},
update(prevData) {
if (!prevData) return
const {data} = this
const changes = AFRAME.utils.diff(data, prevData)
if (‘clip’ in changes) {
return this.stopAction(),
void (data.clip && this.playAction())
}
this.activeActions.forEach((action) => {
‘duration’ in changes && data.duration && action.setDuration(data.duration),
‘clampWhenFinished’ in changes && (action.clampWhenFinished = data.clampWhenFinished),
(‘loop’ in changes || ‘repetitions’ in changes) && action.setLoop(LoopMode[data.loop], data.repetitions),
‘timeScale’ in changes && action.setEffectiveTimeScale(data.timeScale)
})
},
stopAction() {
const {data} = this
for (let i = 0; i < this.activeActions.length; i++) data.crossFadeDuration ? this.activeActions[i].fadeOut(data.crossFadeDuration) : this.activeActions[i].stop()
this.activeActions =
},
playAction() {
console.log()
if (!this.mixer) return
const {model} = this
const {data} = this
const clips = model.animations || (model.geometry || {}).animations ||
if (!clips.length) return
const re = wildcardToRegExp(data.clip)
for (let clip, i = 0; clip = clips[i]; i++) {
if (clip.name.match(re)) {
const action = this.mixer.clipAction(clip, model)
action.enabled = !0,
action.clampWhenFinished = data.clampWhenFinished,
data.duration && action.setDuration(data.duration),
data.timeScale !== 1 && action.setEffectiveTimeScale(data.timeScale),
action.setLoop(LoopMode[data.loop], data.repetitions).fadeIn(data.crossFadeDuration).play(),
this.activeActions.push(action)
}
}
},
tick(t, dt) {
this.mixer && !Number.isNaN(dt) && this.mixer.update(dt / 1e3)
},
}
export {animationRigComponent}
. This way we can apply the animation glb file to the Character glb file 661fdefedb35794cf234d7db.glb
