"ядро: типы свойств: предупреждение "#бот" ресурс не найден. " - aframe-master.js

ProgramBox

«ядро: типы свойств: предупреждение «#бот» ресурс не найден. » — aframe-master.js

Post author:admin
Запись опубликована:19 июля, 2022
Post category:Вопросы по программированию

#reactjs #aframe #ar.js

Вопрос:

Недавно начал использовать aframe и ar.js с помощью react. Пока все шло как по маслу. К сожалению, теперь модель gltf не загружается.

Вот моя сцена:

 <a-scene
        vr-mode-ui="enabled: false;"
        arjs="debugUIEnabled: false; patternRatio: 0.70"
        device-orientation-permission-ui="enabled: true">

          <a-assets timeout='3000'>
            <a-asset-item id="bot" src="url(/assets/robot_walking/scene.gltf)"></a-asset-item>
          </a-assets>

          <a-marker type="pattern" url="markers/07ratio/fly/pattern-fly.patt" id="m3" registermarker >
            <a-entity
              id="hat"
              gltf-model="#bot"
              animation-mixer
              visible="true"
              scale="0.05 0.05 0.05"
              position="0 0 0"
              rotation="0 0 0">
            </a-entity>
          </a-marker>

          <a-entity camera look-controls id="camera"></a-entity>

      </a-scene>

Он отображается внутри компонента react. Обрамление и Ar.js были установлены с помощью npm.
Он уже работал с другим gltf, используя

 gltf-mode="url(/assets/sun_straw_hat/scene.gltf)"

встроенный. Эта модель не имела никаких анимаций и была не такой большой. Но я также не мог использовать asset manager там. Кто-нибудь знает, что я здесь делаю не так? До сих пор я пытался импортировать aframe-extras, импортировать afram и ar.js с <script> тегами в index.html , используя src вместо gltf-модели, используя <a-gltf-model> с src и изменяя время ожидания ресурса. Не повезло ни с чем из этого.

с уважением, Орис

1. Работает ли он вне react (или без arjs, если на то пошло)?

2. Привет, Петр, спасибо за ваш быстрый ответ. Я запустил его без, ar.js и реагируйте, и это работало нормально (с анимацией). С ar.js текстуры немного изменились, но это все еще работало (также с анимацией). Обнаружил, что масштаб намного меньше, чем у предыдущей модели. Теперь он отображается и в react. Но анимации по-прежнему не работают, и мне все равно приходится импортировать их без менеджера активов. (aframe-дополнения, которые я импортировал в react, имеют ту же версию, что и импортированные с тегом <script>)

3. есть ли шанс, что вы могли бы привести минимальный пример для glitch ? Работают ли анимации без react или они вообще не будут работать?

4. ах, теперь это работает… просто нужно было добавить ‘clip: *; ‘ в микшер анимации. Большое спасибо за ответ. Я бы не увидел, что он слишком мал, если бы не белый фон сцены только для кадра. ^^

5. рад, что это работает 🙂 Получайте удовольствие от a-frame!

Ответ №1:

Возможно, я сильно упрощаю, но afaik:

Как правило, в такой настройке:

 <a-assets>
  <a-asset-item id="model" src="scene.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#model"></a-entity>

gltf-model компонент предполагает, что <a-asset-item> узел готов. Но у react есть свой собственный алгоритм, когда отображать какой узел.

Поскольку gltf-model не удается запросить #model узел, вы получаете сообщение об ошибке:

 core:propertyTypes:warn "#bot" asset not found.

Я полагаю, мы можем либо:

1) загрузите модель непосредственно с URL-адреса

 gltf-model="url(path_to_model.gltf)"

который должен работать правильно (как в этом ремиксе вашего глюка):

2) попробуйте отобразить a-assets узел перед [gltf-моделью]

Вероятно, есть способы получше, но я:

поместите маркер камеру в другой компонент react (т.е. <Scene> )

следите за тем, когда сцена ресурсы смонтированы

   class App extends React.Component {

    constructor(props) {
      super(props);
      this.state = {assetsReady: false};
    }
    componentDidMount() {
      this.setState({assetsReady: true});
      // for whatever reason i need to set it manually?
      this.state.assetsReady = true
    }

используйте условие для отображения <Scene/> при монтировании:

 <a-scene>
  <a-assets>
     <a-asset-item id="model" 
                   src="https://cdn.glitch.me/fc511399-d148-4898-ad51-f0b6fafd32a6/scene.gltf"></a-asset-item>  
     </a-assets>
   {
       // this is inside Apps render() function
       this.state.assetsReady == true amp;amp;
       <Scene />
   }            
</a-scene>

проверьте это в этом ремиксе вашего глюка, который, похоже, тоже работает:

Модель дает сбои из-за масштаба (масштабируйте модель в 30-50 раз) — простым решением является использование буфера логарифмической глубины:

 <a-scene renderer="logarithmicDepthBuffer: true"></a-scene>