Search code examples
html3daframevirtual-realitywebvr

Change initial position and rotation of a model

Got a simple .html file using A-Frame that loads a specific model.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Octant Cube - by Dodds, H. & Peres, T.</title>
    <meta name="description" content="Present in the Taxonomy article">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #FAFAFA">
      <a-assets>
        <a-asset-item id="octant" src="octant.glb"></a-asset-item>
      </a-assets>
      <a-entity gltf-model="#octant"></a-entity>
  </body>
</html>

The object loads fine on the page (as the documentation suggests) but this is what I see at first

WebVR A-Frame not satisfied

If I look all down I'm able to see one plane

Look down to see a plane

But would like to see the following at start

Ideal start A-Frame

Using the A-Frame Inspector I was able to see this would suit nice in the position 0 , 0.347, -3 and rotation 0, 58.0274, -0.27.

A-Frame Inspector

I tried adding the position and rotation to <a-assets> and <a-asset-item ... > but no change was possible to be seen.

How can I change the initial position and the rotation of the model?

Solution

  • One needs to add that information in <a-entity> instead, like this

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Octant Cube - by Dodds, H. & Peres, T.</title>
    <meta name="description" content="Present in the Taxonomy article">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #FAFAFA">
      <a-assets>
        <a-asset-item id="octant" src="octant.glb"></a-asset-item>
      </a-assets>
      <a-entity position="0 0.347 -4" rotation="0 60 -1"  gltf-model="#octant"></a-entity>
  </body>
</html>

    This is the final result

    Final Octant Taxonomy