Hello, here is my code. I have a scene Baikal_menu_ar2.glb, it is a menu and there are two buttons Baikal_menu_button1.glb and Baikal_menu_button2.glb, when you press the first button a video with built-in sound should appear, but the problem is that the video does not fit onto the bottle, but is simply flat and the sound with the video it does not stop when the marker is lost, but continues to work, and with the second button where the scene should appear Totem.glb and sound
<a-scene
xrextras-gesture-detector
landing-page
xrextras-loading
xrextras-runtime-error
renderer="colorManagement:true; webgl2: true;"
xrweb="disableWorldTracking: true"
clear-scene>
<!-- Загрузка ресурсов -->
<a-assets>
<a-asset-item id="words-glb" src="./assets/Models/Baikal_menu_ar2.glb"></a-asset-item>
<a-asset-item id="button1-glb" src="./assets/Models/Baikal_menu_button1.glb"></a-asset-item>
<a-asset-item id="button2-glb" src="./assets/Models/Baikal_menu_button2.glb"></a-asset-item>
<a-asset-item id="totem-web-glb" src="./assets/Models/Totem_web.glb"></a-asset-item>
<audio id="foundSound" src="./assets/Models/S_Legend_1.mp3"></audio>
<video
id="video-file"
src="./assets/Models/Baikal_AR1-3_1.mp4"
loop
crossorigin="anonymous"></video>
</a-assets>
<!-- Камера -->
<a-camera
id="camera"
position="0 8 8"
raycaster="objects: .cantap"
cursor="fuse: false; rayOrigin: mouse;">
</a-camera>
<!-- Обработка изображения -->
<xrextras-named-image-target name="Screenshot_2" id="image-target" button-handler>
<!-- Сцена Baikal menu -->
<a-entity
id="totem"
gltf-model="#words-glb"
position="0 -1.5 0"
scale="12 12 12"
rotation="0 0 0"
animation-mixer="clip: Animation; loop: repeat">
</a-entity>
<a-entity
id="soundEntity"
position="0 1.6 -3"
sound="src: #foundSound; positional: false"></a-entity>
<!-- Кнопки -->
<a-entity
id="button1"
gltf-model="#button1-glb"
position="0 -1.17 0.28"
scale="10 10 10"
class="cantap"
visible="true">
</a-entity>
<a-entity
id="button2"
gltf-model="#button2-glb"
position="0 -1.22 0.29"
scale="10 10 10"
class="cantap"
visible="true">
</a-entity>
<!-- Видео, привязанное к метке -->
<a-plane
id="video-overlay"
src="#video-file"
position="0 -0.4 0"
rotation="0 0 0"
scale="1.5 0.8 1"
visible="false">
</a-plane>
<!-- Сцена Totem_web (скрытая по умолчанию) -->
<a-entity
id="totem-scene"
gltf-model="#totem-web-glb"
position="0 -2 0"
scale="8 8 8"
rotation="0 0 0"
visible="false"
animation-mixer="clip: DeformationSystem; loop: repeat">
<a-sound
id="legend-sound-entity"
src="#foundSound"
autoplay="false"
position="0 0 0"></a-sound>
</a-entity>
</xrextras-named-image-target>
</a-scene>
<!-- HTML-кнопка возврата -->
<div
id="restore-button-container"
style="display: none; position: fixed; bottom: 20px; left: 20px; z-index: 999">
<img
id="restore-button"
src="./assets/Media/image-removebg-preview_1.png"
alt="Restore"
style="width: 60px; height: auto; cursor: pointer" />
</div>
and here is my button-handler.js in which I am trying to do something with this
AFRAME.registerComponent('button-handler', {
init() {
const button1 = document.querySelector('#button1')
const button2 = document.querySelector('#button2')
const restoreButtonContainer = document.querySelector('#restore-button-container')
const restoreButton = document.querySelector('#restore-button')
const videoOverlay = document.querySelector('#video-overlay')
const videoElement = document.querySelector('#video-file')
const imageTarget = document.querySelector('#image-target')
const baikalMenu = document.querySelector('#totem') // Сцена Baikal menu
const totemScene = document.querySelector('#totem-scene') // Сцена Totem_web
const legendSound = document.querySelector('#legend-sound-entity') // Звук S_Legend_1.mp3
if (!button1 || !button2 || !restoreButtonContainer || !restoreButton || !videoOverlay || !videoElement || !imageTarget || !baikalMenu || !totemScene || !legendSound) {
console.error('Не найдены необходимые элементы. Проверьте ID элементов.')
return
}
restoreButtonContainer.style.display = 'none'
let videoTime = 0 // Переменная для хранения текущего времени видео
let isSoundPlaying = false // Флаг для отслеживания состояния звука
// Функция для запуска видео
const playVideo = () => {
console.log('Запуск видео')
stopTotemScene() // Останавливаем сцену Totem_web, если она активна
baikalMenu.setAttribute('visible', 'false') // Скрыть сцену Baikal menu
button1.setAttribute('visible', 'false')
button2.setAttribute('visible', 'false')
videoOverlay.setAttribute('visible', 'true') // Показать видео
videoElement.currentTime = videoTime
videoElement.play()
.then(() => console.log('Видео воспроизводится'))
.catch(err => console.error('Ошибка воспроизведения видео:', err))
restoreButtonContainer.style.display = 'block' // Показываем кнопку восстановления
}
// Функция для остановки видео
const stopVideo = () => {
console.log('Остановка видео')
videoOverlay.setAttribute('visible', 'false') // Скрыть видео
videoElement.pause()
videoTime = videoElement.currentTime // Сохранить текущее время
console.log(`Видео остановлено на ${videoTime} секундах`)
restoreButtonContainer.style.display = 'none' // Скрываем кнопку восстановления
baikalMenu.setAttribute('visible', 'true') // Показать сцену Baikal menu
button1.setAttribute('visible', 'true')
button2.setAttribute('visible', 'true')
}
// Функция для показа сцены Totem_web и запуска звука
const showTotemScene = () => {
console.log('Отображаем сцену Totem_web')
stopVideo() // Останавливаем видео, если оно играет
baikalMenu.setAttribute('visible', 'false') // Скрываем Baikal menu
button1.setAttribute('visible', 'false')
button2.setAttribute('visible', 'false')
totemScene.setAttribute('visible', 'true') // Показываем сцену Totem_web
// Запуск звука S_Legend_1.mp3
if (!isSoundPlaying) {
legendSound.components.sound.playSound()
isSoundPlaying = true
console.log('Запуск звука S_Legend_1.mp3')
}
restoreButtonContainer.style.display = 'block' // Показываем кнопку восстановления
}
// Функция для остановки сцены Totem_web и звука
const stopTotemScene = () => {
console.log('Остановка сцены Totem_web и звука')
if (isSoundPlaying) {
legendSound.components.sound.stopSound()
isSoundPlaying = false
console.log('Звук S_Legend_1.mp3 остановлен')
}
totemScene.setAttribute('visible', 'false') // Скрываем Totem_scene
}
// Обработчики событий для кнопок
button1.addEventListener('click', playVideo)
button2.addEventListener('click', showTotemScene)
// Обработчик события для кнопки восстановления
restoreButton.addEventListener('click', () => {
console.log('Нажата кнопка восстановления')
stopVideo() // Остановка видео
stopTotemScene() // Остановка звука и сцены Totem_web
})
// Обработчики для метки
imageTarget.addEventListener('xrimagefound', () => {
console.log('Метка найдена')
})
imageTarget.addEventListener('xrimagelost', () => {
console.log('Метка потеряна')
stopVideo() // Останавливаем видео
stopTotemScene() // Останавливаем звук и сцену
})
},
})