Animation in Imagin Target

🧑‍💻 Technical Support
1

I have a problem, I have a 3D scene Totem_web.glb. When I launch the project, 1 second of its animation is not shown (the animation is like this: the totem is assembled, and then it talks. The problem is that there is no totem assembly, and the totem immediately starts talking)
this body.html: `

<a-entity
  id="button1"
  gltf-model="#button1-glb"
  position="0 -1.17 0.28"
  scale="10 10 10"
  class="cantap"
  scene-button-handler
  visible="true"></a-entity>

<a-entity
  id="button2"
  gltf-model="#button2-glb"
  position="0 -1.2 0.28"
  scale="10 10 10"
  class="cantap"
  scene-button-handler
  visible="true"></a-entity>

<a-entity
  id="totem-web"
  gltf-model="#totem-glb"
  position="0 -1.5 1"
  scale="7 7 7"
  visible="false"
  animation-mixer="clip: DeformationSystem; loop: repeat; time: 0"></a-entity>
<a-entity
  id="screen-scene"
  gltf-model="#screen-ar"
  video-texture="video: #video-file"
  position="0 1 0.2"
  scale="12 12 15"
  rotation="180 270 0"
  visible="true">
</a-entity>
<a-entity
  id="restore-button"
  geometry="primitive: plane; width: 0.7; height: 0.3"
  material="color: red"
  text="value: Вернуться; align: center; color: white"
  position="0 -2 0"
  class="cantap"
  visible="false"></a-entity>
` this is scene-button-handler.js: ``` AFRAME.registerComponent('scene-button-handler', { init() { // Проверяем готовность сцены this.el.sceneEl.addEventListener('loaded', () => { this.setupHandlers() }) },

setupHandlers() {
// Получаем элементы
const button1 = document.querySelector(‘#button1’)
const button2 = document.querySelector(‘#button2’)
const screenScene = document.querySelector(‘#screen-scene’)
const videoElement = document.querySelector(‘#video-file’)
const totemWeb = document.querySelector(‘#totem-web’)
const restoreButton = document.querySelector(‘#restore-button’)
const legendSound = document.querySelector(‘#legend-sound’)

// Устанавливаем начальные состояния
if (screenScene) screenScene.setAttribute('visible', 'false')
totemWeb.setAttribute('visible', 'false')
restoreButton.setAttribute('visible', 'false')
if (videoElement) videoElement.pause()

// Обработчик для button1
button1.addEventListener('click', () => {
  console.log('Кнопка button1 нажата')
  this.toggleVisibility(false)  // Скрываем главную сцену
  if (screenScene) screenScene.setAttribute('visible', 'true')  // Показываем видео-сцену
  if (videoElement) videoElement.play()  // Запускаем видео
  restoreButton.setAttribute('visible', 'true')  // Показываем кнопку возврата
})

// Обработчик для button2
button2.addEventListener('click', () => {
  console.log('Кнопка button2 нажата')
  this.toggleVisibility(false)  // Скрываем главную сцену
  totemWeb.setAttribute('visible', 'true')  // Показываем новую сцену

  // Убедитесь, что анимация начинается с первой секунды
  const animationMixer = totemWeb.getAttribute('animation-mixer')
  if (animationMixer) {
    totemWeb.setAttribute('animation-mixer', 'clip: DeformationSystem; loop: repeat; time: 0')
  }

  restoreButton.setAttribute('visible', 'true')  // Показываем кнопку возврата
  legendSound.play()  // Запускаем звук
})

// Обработчик для restoreButton
restoreButton.addEventListener('click', () => {
  console.log('Кнопка возврата нажата')
  this.toggleVisibility(true)  // Показываем главную сцену
  if (screenScene) screenScene.setAttribute('visible', 'false')  // Скрываем видео-сцену
  totemWeb.setAttribute('visible', 'false')  // Скрываем новую сцену

  if (videoElement) {
    videoElement.pause()  // Останавливаем видео
    videoElement.currentTime = 0  // Сбрасываем видео
  }
  legendSound.pause()  // Останавливаем звук
  legendSound.currentTime = 0  // Сбрасываем звук
  restoreButton.setAttribute('visible', 'false')  // Скрываем кнопку возврата
})

},

toggleVisibility(showMainScene) {
const sceneTotem = document.querySelector(‘#totem’)
const button1 = document.querySelector(‘#button1’)
const button2 = document.querySelector(‘#button2’)

if (sceneTotem) sceneTotem.setAttribute('visible', showMainScene)
if (button1) button1.setAttribute('visible', showMainScene)
if (button2) button2.setAttribute('visible', showMainScene)

},
})

2

Can you show a video of what’s happening on your device when you test the experience?

3


at the beginning there is no totem collection, although when you look at the file, everything is there

4

I took a closer look and identified the issue. In the video below, I slowed down the playback of the animation so we can better observe how everything is functioning. You’ll notice that the animation starts playing as soon as the experience loads, rather than when the totem becomes visible.

To resolve this, you’ll need to adjust your setup so the animation clip is triggered only when the totem becomes visible. You can set this up in your image target component.

Awesome project by the way!

5

can you send me a code example, because I’ve been trying to write it for a while now, but nothing happens

6

Hi! I fixed the issue and I’m landing the code for you now. You should be able to sync to the latest version and let me know if there’s any issues.

7

thank you, you very help me

1 Like
8

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.