<aside> 💡 Description: Processes event then user click/tap on the model. Show the entry point to animation loop. Basic frame-by-frame animation example
</aside>
Use it on "Model" custom code level:
this.activeSceneModel.$parent.emitter.addListener('geenee-model-placed', () => {
let sempleModel = new window.THREE.Object3D();
const clock = new window.THREE.Clock();
const k = 0.02;
let value = 0;
let animated = false;
let startedBack = false;
const animationLooper = (delta) => {
value += delta;
if (sempleModel.position.y <= 0.75 && !startedBack) {
sempleModel.position.y += k;
}
if (value > 6) {
startedBack = true;
if (sempleModel.position.y >= 0) {
sempleModel.position.y -= k;
} else {
value = 0;
animated = false;
startedBack = false;
}
}
}
this.on('on-model-click', () => {
sempleModel = this.activeSceneModel.scene.getObjectByName('SEMPLE_MODEL_NAME');
if (!sempleModel) return;
if (!animated) animated = true;
});
const render = () => {
if (animated) {
const delta = clock.getDelta();
animationLooper(delta);
}
};
// Reassign to Geenee Render Loop
this.activeSceneModel.userCallbacks.onRender = render;
});