Камера Aframe отключается от рига при загрузке страницы

Я новичок в Aframe и столкнулся с одной проблемой, которую не могу решить. Когда у меня загружается Glitch page, камера иногда каким-то образом отключается от головы рига (игрока). Я искал, что может вызвать эту проблему, и я увидел, что это происходит только тогда, когда я добавил дочернюю камеру рендеринга к основной камере (из-за миникарты).

В консоли у меня есть только одно предупреждение:

three.js:3184 THREE.Box3: .getCenter() target is now required
e.getCenter @ three.js:3184

Я использую для второй камеры (мини-карты) этот компонент: https://github.com/jgbarah/aframe-playground/tree/master/camrender-01

Скриншот проблемы: https://imgur.com/a/V8hVKt8

Любые советы или предложения?

Спасибо.

Код:

<a-assets>
   <canvas id = "cam2" position = "0 0 0"></canvas>
</a-assets>
<a-entity id = "bodyOfPlayer"> 
         <a-entity   
                    id = "rig"        
                    position = "0 0 0"
                    rotation = "0 0 0"
                    movement-controls   
                    gaze-interaction  
                    kinematic-body
                    >
                  //this camera I always need to have active because it is main camera of player in first person
                  <a-entity
                            id = "headOfPlayer"
                            camera 
                            position = "0 1.6 0"
                            rotation = "0 0 0"
                            look-controls = "pointerLockEnabled:false"                          
                            >                  
                             
                             <a-sphere class = "head" visible = "true" random-color></a-sphere>
                    
                             <a-circle position = "-1.2 0.58 -1" rotation = "0 0 0" scale = "0.2 0.2 0.2" width = "0.41" height = "0.41"
                             material = "src:#cam2; opacity: .95" canvas-updater></a-circle>
                             <a-image src = "#map" position = "-1.2 0.58 -1" width = "0.53" height = "0.53"></a-image>
                        
                             <a-entity class = "rayhead" cursor raycaster = "objects: .clickable; showLine: true; far: 500" line = "color: white; opacity: 1" position = "0 0 0" visible = "false"></a-entity> 
                            <a-entity cursor = "fuse: false" geometry = "primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material = "color: black; shader: flat" position = "0 0 -1"></a-entity> 
                  </a-entity>
          //this camera is just for minimap -> not active one, it is view from top on player in fixed canvas on screen
           <a-entity camera = "active: false" camrender = "cid: cam2" position = "0 15 0" rotation = "-90 0 0"></a-entity>
         </a-entity>
      </a-entity> 

Не уверен, что смогу воспроизвести проблему, можете выложить пример (глюк, рабочий пример), желательно как можно меньше

Piotr Adam Milewski 17.05.2022 12:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
57
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В основном это происходит из-за того, что A-frame самостоятельно вводит свою камеру во время загрузки. Вы можете проверить это в консоли после добавления всех ресурсов.

document.querySelector('a-scene').camera.el

Если он показывает что-то вроде этого aframe injected camera, отличного от камеры, которую мы определили, вам нужно установить активное состояние этой камеры на false. Так наша камера становится активной.

 document.querySelector('a-scene').camera.el.setAttribute("camera",{active:false}) 

РЕДАКТИРОВАТЬ

Либо ваша сцена загружена правильно, либо нет. Дайте предопределенное время в файле JS и запустите это

document.querySelector('a-scene').camera.el.setAttribute("camera",{active:false})  

или используйте компонент предварительной загрузки aframe Репозиторий кода и в файле preloader.js измените функцию по умолчанию, подобную этой, после оператора cosole.info «Предварительная загрузка завершена»

triggerPreloadingComplete: function(){
            if (this.data.debug){
                console.info('Preloading complete');                 
                
                document.querySelector('a-scene').camera.el.setAttribute("camera",{active:false})}

Это должно решить вашу проблему, то же самое произошло со мной при использовании сетевого фрейма.

Спасибо за ваш ответ. Когда я открываю консоль, я не вижу там камеру с рамкой, если она загружена правильно. Но когда он не загружается должным образом, вмешивается камера, внедренная в кадр, и она там. Проблема в том, что иногда он загружается неправильно, а иногда Aframe сам вставляет камеру.

Renoku 17.05.2022 10:49

если в сцене есть камера, a-frame не должен вводить камеру по умолчанию

Piotr Adam Milewski 17.05.2022 11:17

Почему-то так бывает. Мне было интересно, если цель getCenter() теперь требуется, предупреждающее сообщение имеет к этому какое-то отношение. Ну, я до сих пор не знаю, что может быть причиной этого.

Renoku 17.05.2022 11:59

пожалуйста, проверьте отредактированный ответ. Если вы хотите более четкий ответ, прикрепите код ошибки

ajai.s 17.05.2022 12:50

если у вас несколько камер, вам нужно иметь разные идентификаторы для каждой, вам нужно установить активный статус камеры в зависимости от того, какую камеру вам нужно использовать

ajai.s 17.05.2022 13:46

можешь поделиться кодом глюка?

ajai.s 17.05.2022 17:43

У вас есть Discord или что-то подобное? Я не могу поделиться кодом публично, потому что это частный проект.

Renoku 17.05.2022 17:56

Отправить на [email protected]

ajai.s 17.05.2022 19:08
Ответ принят как подходящий

Вы, вероятно, нажимаете Эта проблема, где теги <template> или <script> между <a-scene> и camera сущностью мешают предполагаемому поведению.

Это довольно легко воспроизвести:

выше была введена камера по умолчанию, и у вас есть две камеры. Теперь, если вы переместите его вверх:

нет дополнительной камеры. Как предполагалось.


Перемещение камеры вверх — это в значительной степени «обходной путь», вы также можете попробовать выполнить предварительную загрузку, как предложил ajai, или удалить камеру по умолчанию после загрузки сцены (код Diarmid McKenzies из связанной проблемы):

// grab the scene
const sceneEl = document.querySelector('a-scene')
// if the camera id is not matching our camera
if (sceneEl.camera.el.id !== 'headOfPlayer') {    
    console.info("Deleting unwanted A-Frame default camera")
    const wrongCameraEntity = this.el.sceneEl.camera.el;
    const cameraEntity = document.getElementById('headOfPlayer');
    cameraEntity.setAttribute('camera', 'active', true); // activate our camera
    wrongCameraEntity.parentEl.removeChild(wrongCameraEntity); // remove the other one
} 

Другие вопросы по теме