Error query when changing GLB files or starting a new project

šŸ§‘ā€šŸ’» Technical Support
1

Hello. Iā€™m a beginner developer who started using 8th Wall a week ago. Iā€™m trying to start a project where models in GLB format appear through augmented reality. It was fine to clone the project when I first started. However, when I change the GLB file, the following error1 occurs. Also, the error2 occurs even when starting from an empty project. What did I overlook? Thank you.

3
31192Ɨ828 236 KB

2

Can you share your project code?

3

head.html is

<!-- Copyright (c) 2024 8th Wall, Inc. -->
<!-- head.html is optional; elements will be added to your html head before app.js is loaded. -->

<!-- Use "8thwall:" meta tags to hook into 8th Wall's build process and developer tools. -->
<meta name="8thwall:renderer" content="aframe:1.4.1" />
<meta name="8thwall:package" content="@8thwall.xrextras" />
<meta name="8thwall:package" content="@8thwall.landing-page" />

<!-- Other external scripts and meta tags can also be added. -->
<script src="//cdn.8thwall.com/web/aframe/aframe-extras-7.2.0.min.js"></script>
<!-- The above library includes the animation-mixer component -->

body.html is

<!-- Copyright (c) 2024 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->

<div id="nextbutton" style="display: none; z-index: 10">
  <h2>Next Animation</h2>
</div>

<a-scene
  next-button
  xrextras-gesture-detector
  landing-page="
    mediaSrc: #animatedModel;
    mediaAnimation: chicken;
    sceneEnvMap: pastel;
    textShadow: True" 
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  xrweb>

  <!-- We can define assets here to be loaded when A-Frame initializes -->
  <a-assets>
    <a-asset-item id="animatedModel" src="./assets/robot.glb"></a-asset-item>
  </a-assets>

  <!-- The raycaster will emit mouse events on scene objects specified with the cantap class -->
  <a-camera
    id="camera"
    position="0 8 8"
    raycaster="objects: .cantap"
    cursor="
      fuse: false;
      rayOrigin: mouse;">
  </a-camera>

  <a-entity
      light="type: directional;
         intensity: 0.8;
         castShadow: true;
         shadowMapHeight:2048;
         shadowMapWidth:2048;
         shadowCameraTop: 10;
         target: #model;"
      position="1 4.3 2.5"
      xrextras-attach="target: model; offset: 1 15 3;"
      shadow>
  </a-entity>

  <a-light type="ambient" intensity="0.5"></a-light>

  <!--  if using the animation-mixer component, make sure to load the external library in head.html-->
  <a-entity
    id="model"
    gltf-model="#animatedModel"
    class="cantap"
    scale="3 3 3"
    animation-mixer="clip: idle; loop: repeat"
    xrextras-hold-drag 
    xrextras-two-finger-rotate
    xrextras-pinch-scale
    shadow="receive: false">
  </a-entity>

  <a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="50" height="50" material="shader: shadow" shadow></a-plane>
</a-scene>

app.js is

// Copyright (c) 2024 8th Wall, Inc.
//
// app.js is the main entry point for your 8th Wall app. Code here will execute after head.html
// is loaded, and before body.html is loaded.

import './index.css'

import {nextButtonComponent} from './next-button'

AFRAME.registerComponent('next-button', nextButtonComponent())

and next-button.js is

const nextButtonComponent = () => ({
  init() {
    const animationList = ['idle', 'pockets', 'hiphop', 'chicken']

    const model = document.getElementById('model')
    const nextButton = document.getElementById('nextbutton')

    nextButton.style.display = 'block'

    let idx = 1  // Start with the 2nd animation because the model starts with idle animation
    const nextAnimation = () => {
      model.setAttribute('animation-mixer', {
        clip: animationList[idx],
        loop: 'repeat',
        crossFadeDuration: 0.4,
      })
      idx = (idx + 1) % animationList.length
    }
    nextButton.onclick = nextAnimation  // Switch to the next animation when the button is pressed.
  },
})

export {nextButtonComponent}
4

Component Definition and Registration:

  • In your app.js, you have the following lines:
    AFRAME.registerComponent('next-button', nextButtonComponent())

  • This line is incorrect because AFRAME.registerComponent expects a component definition object, not the result of a function call.

  • Correct it to:
    AFRAME.registerComponent('next-button', nextButtonComponent)