aframe | : a : web framework for building virtual reality experiences | Augmented Reality library

by aframevr JavaScript Version: v1.2.0 License: MIT

Download this library from

kandi X-RAY | aframe Summary

aframe is a JavaScript library typically used in Virtual Reality, Augmented Reality, Three.js, WebGL applications. aframe has no vulnerabilities, it has a Permissive License and it has medium support. However aframe has 1069 bugs. You can install using 'npm i @ajwest/aframe' or download it from GitHub, npm.

:a: web framework for building virtual reality experiences.

Support

Quality

Security

License

Reuse

kandi-support Support

aframe has a medium active ecosystem.
It has 13681 star(s) with 3292 fork(s). There are 535 watchers for this library.
It had no major release in the last 12 months.
There are 309 open issues and 2572 have been closed. On average issues are closed in 185 days. There are 37 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of aframe is v1.2.0

aframe Support

Best in #Augmented Reality

Average in #Augmented Reality

aframe Support

Best in #Augmented Reality

Average in #Augmented Reality

quality kandi Quality

aframe has 1069 bugs (0 blocker, 0 critical, 147 major, 922 minor) and 77 code smells.

aframe Quality

Best in #Augmented Reality

Average in #Augmented Reality

aframe Quality

Best in #Augmented Reality

Average in #Augmented Reality

security Security

aframe has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
aframe code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

aframe Security

Best in #Augmented Reality

Average in #Augmented Reality

aframe Security

Best in #Augmented Reality

Average in #Augmented Reality

license License

aframe is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

aframe License

Best in #Augmented Reality

Average in #Augmented Reality

aframe License

Best in #Augmented Reality

Average in #Augmented Reality

build Reuse

aframe releases are available to install and integrate.
Deployable package is available in npm.
Installation instructions are not available. Examples and code snippets are available.
aframe saves you 3849 person hours of effort in developing the same functionality from scratch.
It has 8203 lines of code, 0 functions and 375 files.
It has low code complexity. Code complexity directly impacts maintainability of the code.

aframe Reuse

Best in #Augmented Reality

Average in #Augmented Reality

aframe Reuse

Best in #Augmented Reality

Average in #Augmented Reality

Top functions reviewed by kandi - BETA

kandi has reviewed aframe and discovered the below as its top functions. This is intended to give you an instant insight into aframe implemented functionality, and help decide if they suit your requirements.

Initialize a new WebGL renderer .
Constructs a WebGL textures
Creates a new ColorState .
Create a fog object .
Create a binding state object .
Creates the WebGL program objects
Creates state object from parsed file
Creates a new WebVRVR instance .
Parse a JSON model in FBXTree . Objects . Geometry .
Shows the shadow map .

aframe Key Features

:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in <a-scene>. :heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids. :electric_plug: Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL. :zap: Performance: A-Frame is a thin framework on top of three.js. Although A-Frame uses the DOM, A-Frame does not touch the browser layout engine. Performance is a top priority, being battle-tested on highly interactive WebVR experiences. :globe_with_meridians: Cross-Platform: Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones. :mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector with a workflow similar to a browser's developer tools and interface similar to Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.

aframe Examples and Code Snippets

See all related Code Snippets

Example

Copy

Download

&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://aframe.io/releases/1.3.0/aframe.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a-scene&gt;
      &lt;a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"&gt;&lt;/a-box&gt;
      &lt;a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"&gt;&lt;/a-sphere&gt;
      &lt;a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"&gt;&lt;/a-cylinder&gt;
      &lt;a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"&gt;&lt;/a-plane&gt;
      &lt;a-sky color="#ECECEC"&gt;&lt;/a-sky&gt;
    &lt;/a-scene&gt;
  &lt;/body&gt;
&lt;/html&gt;

Builds

Copy

Download

&lt;head&gt;
  &lt;script src="https://aframe.io/releases/1.3.0/aframe.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

npm

Copy

Download

npm install --save aframe
# Or yarn add aframe

Local Development

Copy

Download

git clone https://github.com/aframevr/aframe.git  # Clone the repository.
cd aframe &amp;&amp; npm install  # Install dependencies.
npm start  # Start the local development server.

Generating Builds

Copy

Download

npm run dist

How to make a entity clickable which is getting generated dynamically in networked A-Frame?

Copy

Download

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
// declare a component
AFRAME.registerComponent("click-detector", {
 // called upon initialisation
 init: function() {
   // when a click is detected
   this.el.addEventListener("click", () => {
    // log "clicked"
    console.log("clicked")
   })
 }
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
  <a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E" click-detector></a-sphere>
</a-scene>

<template id="avatar-template">
  <a-entity class="avatar">
    <a-sphere class="head" scale="0.45 0.5 0.4" click-detector></a-sphere>
  </a-entity>
</template>

-----------------------

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
// declare a component
AFRAME.registerComponent("click-detector", {
 // called upon initialisation
 init: function() {
   // when a click is detected
   this.el.addEventListener("click", () => {
    // log "clicked"
    console.log("clicked")
   })
 }
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
  <a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E" click-detector></a-sphere>
</a-scene>

<template id="avatar-template">
  <a-entity class="avatar">
    <a-sphere class="head" scale="0.45 0.5 0.4" click-detector></a-sphere>
  </a-entity>
</template>

A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only

Copy

Download

const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});

// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);

-----------------------

const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});

// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);

How can i get a Third person perspective for a model using Aframe?

Copy

Download

 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

-----------------------

 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

-----------------------

 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

A-frame limit cameras y distance

Copy

Download

// distance = |y_position - y_start|
const y = this.el.object3D.position.y;
const distance = Math.abs(0 - y);
if (distance > 10) {// do your stuff}

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('limit-my-distance', {
    tick: function() {
      if (Math.abs(this.el.object3D.position.y) > 3) {
        this.el.object3D.position.y = 2;
      }
    }
  });
  AFRAME.registerComponent("fall", {
    tick: function() {
      this.el.object3D.position.y -= 0.15
    }
  })
</script>
<a-scene>
  <a-sphere position="0  2 -5" color="red" fall limit-my-distance></a-sphere>
  <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20" material="wireframe: true"></a-plane>
  <a-camera></a-camera>
</a-scene>

-----------------------

// distance = |y_position - y_start|
const y = this.el.object3D.position.y;
const distance = Math.abs(0 - y);
if (distance > 10) {// do your stuff}

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('limit-my-distance', {
    tick: function() {
      if (Math.abs(this.el.object3D.position.y) > 3) {
        this.el.object3D.position.y = 2;
      }
    }
  });
  AFRAME.registerComponent("fall", {
    tick: function() {
      this.el.object3D.position.y -= 0.15
    }
  })
</script>
<a-scene>
  <a-sphere position="0  2 -5" color="red" fall limit-my-distance></a-sphere>
  <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20" material="wireframe: true"></a-plane>
  <a-camera></a-camera>
</a-scene>

-----------------------

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
    AFRAME.registerComponent('limit-my-distance', {
      init: function() {
          // nothing here
      },
      tick: function() {
        // limit Z
        if (this.el.object3D.position.z > 3.8) {
          this.el.object3D.position.z = 3.8;
        }
        if (this.el.object3D.position.z < -3.8) {
          this.el.object3D.position.z = -3.8;
        }

        // limit X
        if (this.el.object3D.position.x > 3.8) {
          this.el.object3D.position.x = 3.8;
        }
        if (this.el.object3D.position.x < -3.8) {
          this.el.object3D.position.x = -3.8;
        }

      }
    });
</script>
<a-scene>
<a-sphere position="0 2 -10"color="red"></a-sphere>
<a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
<a-camera limit-my-distance look-controls wasd-controls="acceleration:10" position="0 1.6 0"></a-camera>
<a-sky color="#fff"></a-sky>
</a-scene>

GL_OUT_OF_MEMORY using A-frame to display stereoscopic images

Copy

Download

element.getObject3D("mesh").material.map = texture;
material.needsUpdate = true;

how do i clone a random object from a list and make it visible using A-frame.js

Copy

Download

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        // make it smaller, and move it a bit
        new_element.setAttribute("scale", "0.2 0.2 0.2")
        new_element.setAttribute("position", {
          x: Math.random() * 6 - 3,
          y: 0.5,
          z: -1
        })
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">COPY</button>
<a-scene foo>
  <a-entity id="template">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  //register system
  AFRAME.registerSystem("foo", {
    init: function() {
      // array of all registered elements
      this.elements = [];
      // set up the throttled version
      this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
    },
    register: function(el) {
      // push new element to the registered array
      this.elements.push(el)
    },
    tick: function() {
      // loop through all of the elements, and move them down
      for (el of this.elements) {
        const pos = el.object3D.position // this is more efficient than getAttribute("position")
        pos.y = (pos.y < 0) ? 2 : pos.y - 0.1; // use setAttribute() if you want getAttribute() to work
      }
    }
  })

  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      //  move it a bit, and make it visible
      this.el.setAttribute("position", {
        x: Math.random() * 6 - 3,
        y: 0.5,
        z: -2
      })
      this.el.setAttribute("visible", "true")

      // register the element in the system
      this.system.register(this.el)
    }
  })

  AFRAME.registerComponent("inserter", {
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        new_element.setAttribute("foo", "")
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">NEW</button>
<a-scene inserter>
  <a-entity id="template" visible="false" scale="0.2 0.2 0.2">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

-----------------------

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        // make it smaller, and move it a bit
        new_element.setAttribute("scale", "0.2 0.2 0.2")
        new_element.setAttribute("position", {
          x: Math.random() * 6 - 3,
          y: 0.5,
          z: -1
        })
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">COPY</button>
<a-scene foo>
  <a-entity id="template">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  //register system
  AFRAME.registerSystem("foo", {
    init: function() {
      // array of all registered elements
      this.elements = [];
      // set up the throttled version
      this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
    },
    register: function(el) {
      // push new element to the registered array
      this.elements.push(el)
    },
    tick: function() {
      // loop through all of the elements, and move them down
      for (el of this.elements) {
        const pos = el.object3D.position // this is more efficient than getAttribute("position")
        pos.y = (pos.y < 0) ? 2 : pos.y - 0.1; // use setAttribute() if you want getAttribute() to work
      }
    }
  })

  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      //  move it a bit, and make it visible
      this.el.setAttribute("position", {
        x: Math.random() * 6 - 3,
        y: 0.5,
        z: -2
      })
      this.el.setAttribute("visible", "true")

      // register the element in the system
      this.system.register(this.el)
    }
  })

  AFRAME.registerComponent("inserter", {
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        new_element.setAttribute("foo", "")
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">NEW</button>
<a-scene inserter>
  <a-entity id="template" visible="false" scale="0.2 0.2 0.2">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

A-frame responsive object

Copy

Download

const renderer = new THREE.WebGLRenderer({/*...*/});

// This prevents the renderer from clearing buffers in between renders
renderer.autoClear = false;

// Main will hold 3D objects
const sceneMain = new THREE.Scene();
scenemain.add(some3DObject);

// Small scene for top-left corner
const sceneSmall = new THREE.Scene();
sceneSmall.add(videoObject);

renderLoop() {
    // Clear renderer buffers
    renderer.clear();

    // Render main scene across full screen
    this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
    renderer.render(sceneMain, cameraMain);

    // Reset depth buffer
    renderer.clearDepth();
    
    // Render small scene in a 100x100 square
    this.renderer.setViewport(0, window.innerHeight - 100, 100, 100);
    renderer.render(sceneSmall, cameraSmall);
}

a-frame : how to make the hands follow the camera?

Copy

Download

<a-entity id="rig" movement-controls position="0 0 0">
   <a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>

    <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly;"></a-entity>
    <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly;"></a-entity>
</a-entity>

gltf animations are not playing with flat shader

Copy

Download

 material.skinning = true;

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // wait for the model to load
      this.el.addEventListener("model-loaded", evt => {
        // create new material - with it skinning flag raised
        const new_material = new THREE.MeshNormalMaterial({skinning: true});
        const mesh = this.el.getObject3D('mesh');

        // traverse the mesh and apply the material
        mesh.traverse(node => {
          if (!node.isMesh) return;
          node.material = new_material;
          node.material.needsUpdate = true;
        })
      })
    }
  })

</script>
<a-scene>
  <a-assets>
    <a-asset-item id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/20656ea38ce797a8dff0d2915b656aff75d32a71/2.0/CesiumMan/glTF-Binary/CesiumMan.glb"></a-asset-item>
  </a-assets>
    <a-entity position="1 0 -3" gltf-model="#model" animation-mixer="clip: *" foo></a-entity>
  <a-entity position="-1 0 -3" gltf-model="#model" animation-mixer="clip: *"></a-entity>
</a-scene>

-----------------------

 material.skinning = true;

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // wait for the model to load
      this.el.addEventListener("model-loaded", evt => {
        // create new material - with it skinning flag raised
        const new_material = new THREE.MeshNormalMaterial({skinning: true});
        const mesh = this.el.getObject3D('mesh');

        // traverse the mesh and apply the material
        mesh.traverse(node => {
          if (!node.isMesh) return;
          node.material = new_material;
          node.material.needsUpdate = true;
        })
      })
    }
  })

</script>
<a-scene>
  <a-assets>
    <a-asset-item id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/20656ea38ce797a8dff0d2915b656aff75d32a71/2.0/CesiumMan/glTF-Binary/CesiumMan.glb"></a-asset-item>
  </a-assets>
    <a-entity position="1 0 -3" gltf-model="#model" animation-mixer="clip: *" foo></a-entity>
  <a-entity position="-1 0 -3" gltf-model="#model" animation-mixer="clip: *"></a-entity>
</a-scene>

AFrame: Get the marker ID when markerFound listener is triggered

Copy

Download

AFRAME.registerComponent("foo", {
  init: function() {
    console.log("init", this) // this - components body
    this.el.addEventListener("loaded", function() {
      // this - the element which the listener is added to
      console.log("function callback", this)
    })
    this.el.addEventListener("loaded", evt => {
      // this - the components body, because of the arrow function
      console.log("lambda callback", this) 
    })
  }
})

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      console.log("init. id: ", this.el.id)
      this.el.addEventListener("loaded", function() {
        console.log("function callback. id: ", this.id)
      })
      this.el.addEventListener("loaded", evt => console.log("arrow func. callback. id: ", this.el.id));
    }
  })
</script>
<a-scene>
  <a-box id="one" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
</a-scene>

-----------------------

AFRAME.registerComponent("foo", {
  init: function() {
    console.log("init", this) // this - components body
    this.el.addEventListener("loaded", function() {
      // this - the element which the listener is added to
      console.log("function callback", this)
    })
    this.el.addEventListener("loaded", evt => {
      // this - the components body, because of the arrow function
      console.log("lambda callback", this) 
    })
  }
})

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      console.log("init. id: ", this.el.id)
      this.el.addEventListener("loaded", function() {
        console.log("function callback. id: ", this.id)
      })
      this.el.addEventListener("loaded", evt => console.log("arrow func. callback. id: ", this.el.id));
    }
  })
</script>
<a-scene>
  <a-box id="one" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
</a-scene>

See all related Code Snippets

Community Discussions

Trending Discussions on aframe

How to make a entity clickable which is getting generated dynamically in networked A-Frame?
How to add Navmesh to existing Aframe (v1.3.0)?
A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only
How can i get a Third person perspective for a model using Aframe?
A-frame limit cameras y distance
GL_OUT_OF_MEMORY using A-frame to display stereoscopic images
how do i clone a random object from a list and make it visible using A-frame.js
A-frame responsive object
a-frame : how to make the hands follow the camera?
gltf animations are not playing with flat shader

Trending Discussions on aframe

QUESTION

How to make a entity clickable which is getting generated dynamically in networked A-Frame?

Asked 2022-Mar-30 at 09:13

I am using a networked A-frame to generate a new entity when the page is loaded. I want to add a few functionalities on those entities like hover, on click, etc. I tried making it clickable but it didn't work.

function rigClick(){
        console.log("Entity Clicked");
      }

<a-scene>
    <a-entity id="rig" onclick="rigClick()">
        <a-entity
          id="foo"
          networked="template:#rig-template;attachTemplateToLocal:false;"
          camera="active:true;"
          position="-27 2.5 24"
          wasd-controls="acceleration:12;"
          look-controls
          spawn-in-circle="radius:2"
        >
        </a-entity>
     </a-entity>
</a-scene>

I also tried using the register component but I am unable to get the results.

AFRAME.registerComponent('click-handler', {
      init: function () {
        let entity = document.querySelector('#rig')

        entity.addEventListener('click', (e) => {
          console.log("You just clicked on entity");
        })
      }
    });

<a-scene>
    <a-entity id="rig">
        <a-entity
          id="foo"
          networked="template:#rig-template;attachTemplateToLocal:false;"
          camera="active:true;"
          position="-27 2.5 24"
          wasd-controls="acceleration:12;"
          look-controls
          spawn-in-circle="radius:2"
          click-handler
        >
        </a-entity>
     </a-entity>

ANSWER

Answered 2022-Mar-30 at 09:13

If you want to use your mouse, you need a cursor which will map 2D mouse clicks onto 3D rays checking whats under the mouse cursor:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
// declare a component
AFRAME.registerComponent("click-detector", {
 // called upon initialisation
 init: function() {
   // when a click is detected
   this.el.addEventListener("click", () => {
    // log "clicked"
    console.log("clicked")
   })
 }
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
  <a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E" click-detector></a-sphere>
</a-scene>

Works the same in aframe-networked as long as you add the component to the networked-template so that every new 'player' has the component attached:

<template id="avatar-template">
  <a-entity class="avatar">
    <a-sphere class="head" scale="0.45 0.5 0.4" click-detector></a-sphere>
  </a-entity>
</template>

Source https://stackoverflow.com/questions/71662119

QUESTION

A-Frame + pdf.js: unable to update canvas texture twice, in VR mode only

Asked 2022-Mar-05 at 14:51

I am using A-Frame and pdf.js to create an application to view PDF files in VR. The application works as expected on desktop, including advancing to the next page of the PDF document and re-rendering to a canvas.

When running in a browser in VR (tested with Quest 2), the first attempt renders as expected. However, when rendering a second document page to the canvas, the new image fails to appear unless exiting VR mode, at which point the new texture appears as expected.

I have tried setting the associated material map.needsUpdate repeatedly (in an A-Frame component tick loop) to no effect. While experimenting, I also noticed that if you try to render a new PDF page a second time and then another page a third time (advancing by two pages while in VR mode), when exiting VR mode, only the texture from the second time appears; the data from the third render appears to be lost - I wonder if this is related to the primary issue.

Code for a minimal example is below, and a live version is available at http://stemkoski.net/test/quest-pdf-min.html . When viewing the example in desktop mode, you can advance to the next page by opening the browser JavaScript console and entering testBook.nextPage(); and see that the image changes as expected. You can test in VR mode with a Quest headset; pressing the A button should advance to the next page.

The question is: how can I render pages of a PDF document to the same canvas, multiple times, while in VR mode in A-Frame?

<!DOCTYPE html>
<html>

<head>
    <title>A-Frame + PDF.js</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.js"></script>
</head>

<body>
<script>
AFRAME.registerComponent("interactive-pdf", {

    schema:
    {   
        fileName:   {type: 'string', default:"assets/test10.pdf"},
        pageWidth:  {type: 'float',  default: 1200},
        pageHeight: {type: 'float',  default: 1500},
    },

    init: function () 
    {
        this.displayPlane = document.getElementById("plane1");
        this.displayMaterial = this.displayPlane.getObject3D('mesh').material;
        this.canvas = this.displayPlane.getAttribute("material").src
        this.canvas.setAttribute("width", this.data.pageWidth);
        this.canvas.setAttribute("height", this.data.pageHeight);
        this.context = this.canvas.getContext('2d');
        this.textArea = document.querySelector("#textArea");

        this.pdf = null;
        this.currentPage = 1;

        pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js";

        let self = this;
        pdfjsLib.getDocument(this.data.fileName).promise.then( function(pdf) {
            self.pdf = pdf;
            self.render(1);
        });
    },

    render(pageNumber = 1)
    {
        if (!this.pdf)
            return;

        let self = this;

        let text = "rendering page " + pageNumber + " of " + this.pdf.numPages + " on canvas";
        this.textArea.setAttribute("text", "value", text);

        this.pdf.getPage(pageNumber).then( function(page) {

            const pageViewport = page.getViewport({ scale: 2 });
            const context = self.canvas.getContext("2d");
            const renderContext = {
              canvasContext: context,
              viewport: pageViewport
            };

            const renderTask = page.render(renderContext);

            renderTask.promise.then( function() {
                self.displayMaterial.map.needsUpdate = true;
            });    
        });
    },

    nextPage: function()
    {
        this.currentPage++;
        this.render( this.currentPage );
    },

    prevPage: function()
    {
        this.currentPage--;
        this.render( this.currentPage );
    },

    tick: function()
    {
        // this.displayMaterial.map.needsUpdate = true;
    }

});

AFRAME.registerComponent('page-turner', {
  
  init: function () 
  {
      let bookComponent = document.getElementById("interactive-pdf").components["interactive-pdf"];
      this.el.addEventListener('abuttondown', function(event) { bookComponent.nextPage(); } );
  }

});
</script>

<a-scene>
        
    <a-assets>
        <!-- use to display pdf pages -->
        <canvas id="canvas1"></canvas>
    </a-assets>

    <a-camera></a-camera>

    <a-sky color = "#000337"></a-sky>

    <a-plane id="plane1" material="shader: flat; src: #canvas1;" position="0 1 -2"></a-plane>

    <a-entity id="interactive-pdf" position="0 1 -2" 
        interactive-pdf="fileName: assets/test10.pdf; pageWidth: 1224; pageHeight: 1584;">
    </a-entity>
        
    <a-entity id="left-controller" oculus-touch-controls="hand: left"></a-entity>
    <a-entity id="right-controller" oculus-touch-controls="hand: right" page-turner></a-entity>   

    <!-- text area to print debug text -->
    <a-entity id="textArea" position="0 2 -2"
        geometry="primitive: plane;  width: 3; height: auto"
        material="color: #444444;"
        text="anchor: center; color: #8888FF; value: debug text here">
    </a-entity>

</a-scene>

<script>
var testBook = document.getElementById("interactive-pdf").components["interactive-pdf"];
</script>

</body>
</html>

ANSWER

Answered 2022-Mar-05 at 14:51

Found an answer here:

requestAnimationFrame doesn't fire when WebXR is engaged

Its quite relevant because pdf.js uses requestAnimationFrame by default when rendering the image onto the canvas.

It can be toggled though - the pages render function has an option intent, which is later on used to determine whether to use requestAnimationFrame.

The sources You use are slightly different (older?), but if you search for creating the InternalRenderTask in the render function of the ProxyPDFPage - it's all there:

const internalRenderTask = new InternalRenderTask({
  callback: complete,
  params: {
    canvasContext,
    viewport,
    transform,
    imageLayer,
    background
  },
  objs: this.objs,
  commonObjs: this.commonObjs,
  operatorList: intentState.operatorList,
  pageIndex: this._pageIndex,
  canvasFactory: canvasFactoryInstance,
  webGLContext,
  useRequestAnimationFrame: renderingIntent !== "print",
  pdfBug: this._pdfBug
});

You can set the intent to print in your renderContext object:

// 'interactive-pdf'.render()
const renderContext = {
          canvasContext: context,
          viewport: pageViewport,
          intent: "print"
};
const renderTask = page.render(renderContext);

And it seems to be working properly:

I'm not sure, if setting the intent to print won't cause undesired effects (it affects other settings as well), so disabling useRequestAnimationFrame in the source does the trick as well.

Check out the version with the 'print' intent, or the one with the modified pdfjs source code.

Source https://stackoverflow.com/questions/71344700

QUESTION

How can i get a Third person perspective for a model using Aframe?

Asked 2022-Mar-03 at 18:25

I want my A-frame camera to be behind the model and work as a TPP. I want a model to sync with the camera and rotate and move where ever the camera is moving but it should not move if the camera is pointing up and down it should not look like the model is stuck on the camera.

<html>

<head>
  <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/aframe-physics-components@1.1.0/dist/aframe-physics-components.min.js"></script>
  <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
  <script src="https://unpkg.com/super-hands@^3.0.1/dist/super-hands.min.js"></script>
</head>

<body>
  <a-scene physics="gravity: -9.8; restitution: 0.7;" antialias="true">
    <a-assets>
      <img id="ground-grass" src="grass.jpg" />
    </a-assets>
    <a-entity universal-controls="" camera kinematic-body=""
      position="-2.9021956210846644 1.5405810531492952 -3.927244596410301"></a-entity>
    <a-plane src="#ground-grass" scale="50 50 1" repeat=" 5 5 1" rotation="-90 0 0" static-body></a-plane>
    <a-box color="#AA0000" scale="2 2 2" position="-2.5 0.5 -7.5" static-body></a-box>
  </a-scene>
</body>

</html>

If I move the camera the box should also move. Output image

ANSWER

Answered 2022-Mar-03 at 18:25

The easiest way would be simple reparenting:

 <!-- The default aframe camera entity -->
 <a-camera>
   <!-- The object with the same transform as the camera + some offset -->
   <a-box position="0 0 -0.5"></a-box>
 </a-camera>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- "Player" -->
  <a-camera>
    <a-box position="0 -0.5 -0.65" scale="0.25 0.25 0.25" color="red"></a-box>
  </a-camera>

</a-scene>

A more complex, but flexible solution, would be creating a controller with javascript. Lets say we want to:

Make the camera follow the box
Make the box rotate with the camera
Preferably not instant, but smooth.

we could do it with a component like this:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

<script>
  AFRAME.registerComponent("follow-box", {
    schema: {
      target: {type: "selector"}
    },
    tick: (function() {
      // create once
      const tmpv = new THREE.Vector3();

      return function(t, dt) {
        if (!this.data.target) return; // ignore when there is no target
        const target = this.data.target.getObject3D("mesh"); // get the mesh
        // track the position
        const position = target.getWorldPosition(tmpv); // get the world position
        this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
      }
    })()
  })
  AFRAME.registerComponent("rotate-with-camera", {
    tick: (function() {
      // create once
      const tmpq = new THREE.Quaternion();
      const tmpe = new THREE.Euler();
      
      return function(t, dt) {
        if (!this.el.sceneEl.camera) return; // ignore when there is no camera
        const cam = this.el.sceneEl.camera.el; // get the camera entity
        cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
    tmpe.setFromQuaternion(tmpq, 'YXZ')
    // set attribute is necesarry for wasd-controls
        this.el.setAttribute("rotation", {x: 0, y: tmpe.y * 180 / Math.PI, z: 0 })
      }
    })()
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <!-- camera "rig" -->
  <a-entity follow-box="target: #player" look-controls>
    <a-entity camera position="0 1.6 2"></a-entity>
  </a-entity>

  <!-- the "player" -->
  <a-box id="player" color="red" wasd-controls="speed: 35" rotate-with-camera></a-box>
  
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

The best way would be to re-use the orbit-controls, but afaik they won't work with wasd controls without some customization

Source https://stackoverflow.com/questions/71336022

QUESTION

A-frame limit cameras y distance

Asked 2022-Feb-09 at 13:37

I have some code that restricts the camera movement in A-frame so when the camera moves 10 spaces away from the starting point, they are teleported back to the position 0, 1.6, 0. Currently, this works is the players x or y axis moves 10 spaces away from their starting point. How can I modify this so the player is only teleported back if only their y position moves 10 spaces from their starting point? Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <meta charset="UTF-8" />
</head>

<body>
  <script>
    AFRAME.registerComponent('limit-my-distance', {
      init: function() {
        this.zero = new THREE.Vector3(0, 0, 0);
      },
      tick: function() {
        if (this.el.object3D.position.distanceTo(this.zero) > 10) {
          this.el.object3D.position.set(0, 1.6, 0);
        }
      }
    });
  </script>
  <a-scene>
    <a-sphere position="0 2 -10"color="red"></a-sphere>
    <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20"></a-plane>
    <a-camera limit-my-distance></a-camera>
    <a-sky color="#fff"></a-sky>
  </a-scene>
</body>

</html>

ANSWER

Answered 2021-Oct-04 at 09:51

If you want to check only the y axis, then it's as simple as checking the difference of two numbers:

// distance = |y_position - y_start|
const y = this.el.object3D.position.y;
const distance = Math.abs(0 - y);
if (distance > 10) {// do your stuff}

Something like this:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('limit-my-distance', {
    tick: function() {
      if (Math.abs(this.el.object3D.position.y) > 3) {
        this.el.object3D.position.y = 2;
      }
    }
  });
  AFRAME.registerComponent("fall", {
    tick: function() {
      this.el.object3D.position.y -= 0.15
    }
  })
</script>
<a-scene>
  <a-sphere position="0  2 -5" color="red" fall limit-my-distance></a-sphere>
  <a-plane color="green" position="0 0 -5" rotation="-90 0 0" width="20" height="20" material="wireframe: true"></a-plane>
  <a-camera></a-camera>
</a-scene>

Source https://stackoverflow.com/questions/69421960

QUESTION

GL_OUT_OF_MEMORY using A-frame to display stereoscopic images

Asked 2022-Jan-19 at 23:49

I've created a proof-of-concept SPA (source code / demo) which loads stereoscopic images from a web server and renders them in stereoscopic 3D using the aframe-stereo-component for A-frame.

Testing this on a Quest 2 in the Oculus Browser and Firefox Reality, this works fine: each image appears in 3D when viewed in immersive VR mode via WebXR.

However, after scrolling through a number of images (usually 8 to 12), the slideshow stops working. In Firefox Reality, this manifests by the app just freezing and becoming unresponsive.

In Oculus Browser, the image description is displayed but the image area remains black. Connecting the Quest 2 to a PC with adb and inspecting the page using Chrome DevTools, I can see the following output when this occurs:

23:07:59.195 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: 
23:07:59.195 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:07:59.195 [.WebGL-0x55930300]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: 
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: 
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:08:03.499 WebGL: too many errors, no more errors will be reported to the console for this context.

Admittedly the images being loaded are large JPS files (2 to 3Mb) and each image is rendered twice: once for each eye. However, an <img> element is used to load the image content by adding it to the DOM and when the next image is requested, this is removed and nulled to invalidate the image content so in theory only one image should be loaded at any one time. Therefore I'm assuming there must be a memory leak somewhere which is causing the memory to get filled up after a number of images have been loaded but I'm not sure where it's leaking. I'm not able to reproduce the issue on a PC using Chrome/Firefox but this is probably because it has more memory than the Quest 2.

Relevant source code extracts:

<a-scene id="scene" vr-mode-ui="enabled: false" >
    <a-assets id="assets"></a-assets>
    <a-plane id="left-image"
      material="repeat:0.5 1"
      scale="2 1 1"
      position="0 0 -1"
      stereo="eye:left"
    >
    </a-plane>
    <a-plane id="right-image"
      material="repeat:0.5 1; offset: 0.5 0"
      scale="2 1 1"
      position="0 0 -1"
      stereo="eye: right"
    ></a-plane>
</a-scene>

const stereoImageId = 'fullsize-image'
const _stereoImage = '#'+stereoImageId;
const leye = $('#left-image')[0];
const reye = $('#right-image')[0];
const $assets = $('#assets');

const removeStereoImage = function(){
    let $stereoImage = $(_stereoImage);
    if($stereoImage.length){
        let stereoImage = $stereoImage[0];
        stereoImage.onload = stereoImage.onerror = null;
        $stereoImage.attr('src', '').remove();
        $stereoImage = stereoImage = null;
    }
};

const unloadStereoImage = function(){
    removeStereoImage();
    leye.setAttribute("material", "src", '');
    reye.setAttribute("material", "src", '');
    setStereoImageVisibility(false);
};

const setStereoImageVisibility = function(visible){
    leye.setAttribute("visible", visible)
    reye.setAttribute("visible", visible)
};


const showImg = function(url, description){
    function onImgLoaded(){
        leye.setAttribute("material", "src", _stereoImage);
        reye.setAttribute("material", "src", _stereoImage);
        setStereoImageVisibility(true);
    }

    unloadStereoImage();

    let stereoImage = document.createElement('img');
    stereoImage.setAttribute('id', stereoImageId);
    stereoImage.setAttribute('crossorigin', "anonymous");
    stereoImage.setAttribute('src', url);
    stereoImage.onload = onImgLoaded;
    $(stereoImage).appendTo($assets);
};

I've also raised this as an issue in the source code repo

ANSWER

Answered 2021-Oct-04 at 09:18

The asset management system (a-assets) is intended to help with preloading assets, not throwing them in and out at runtime.

Removing the <img> element from the assets won't dispose the texture (which is cached within the material system).

You can access and clear the cache, but I'd try managing the images 'manually',

loading the image via new THREE.Texture(src) like the material system does
apply the material with

element.getObject3D("mesh").material.map = texture;
material.needsUpdate = true;

remove the old texture with texture.dispose()

Thought that the textures are too big, but I guess each one would crash.

Source https://stackoverflow.com/questions/69432820

QUESTION

how do i clone a random object from a list and make it visible using A-frame.js

Asked 2021-Dec-28 at 22:45

I'm using Javascript and A-frame. I want to be able to get a random block from the list of blocks and I want it to move down by 1. I can't seem to get any of the blocks to appear randomly on the load current. Below is the code I created to make my tetris board but it's currently giving me slight issues.

I am getting the error

  "message": "Uncaught SyntaxError: Unexpected end of input",

I'm not sure what that means?

var zigZag = document.querySelector("#zigZag");

var fork = document.querySelector("#fork");

var box = document.querySelector("#box");

var line = document.querySelector("#line");

var plane = document.querySelector("#plane");

//timer
// let hour = 0;
// let minute = 0;
// let second = 0;
// let millisecond = 0;

// let cron;

var newBlock, blocks, element, blocksOnPlane, planeBlock;

// Describe this function...

newBlock = [];

blocks = [zigZag, fork, line, box];

blocksOnPlane = [];
document.addEventListener("load", start);

function start() {
  while (true) {
    new Promise((res) => setTimeout(() => res(chooseBlock()), 10));
    console.log(newBlock.length);
    for (var element_index in newBlock) {
      element = newBlock[element_index];
      moveBlock(element);
      plane.detectCollisionsWith(newBlock[element_index], function (
        collidedObject
      ) {
        newBlock = collidedObject;
        newBlock.object3D.position.y = 0;
        blocksOnPlane.unshift(planeBlock);
        newBlock.shift();
      });
      // for (var element_index in blocksOnPlane) {
      //     element = blocksOnPlane[element_index];
      //     newBlock.detectCollisionsWith(planeBlock, function (collidedObject) {
      //         element.setY(element.getY() + 0)
      //         planeBlock = collidedObject;
      //         blocksOnPlane.unshift(planeBlock);
      //         newBlock.shift();

      //     })
      // }
    }
  }
}


document.addEventListener("keydown", function (event) {
  if (event.keyCode === 37) {
    element.object3D.position.x += -1;
  }
  //top
  else if (event.keyCode === 38) {
    element.object3D.position.x += 1;
  }
  //right
  else if (event.keyCode === 39) {
    element.object3D.position.x += 1;
  }
  //bottom
  else if (event.keyCode === 40) {
    element.object3D.position.x += -1;
  }
});

function moveBlock(element) {
  document.createTimer("timer1", 1 * 1000, function () {
    element.object3D.position.y += -1;
  });
}

function listsGetRandomItem(list, remove) {
  var x = Math.floor(Math.random() * list.length);
  if (remove) {
    return list.splice(x, 1)[0];
  } else {
    return list[x];
  }
}

// Describe this function...
function chooseBlock() {
  var tetrisBlock = document.clone(listsGetRandomItem(blocks, false));
  tetrisBlock.visible = true;
  tetrisBlock.object3D.position.x = 0;
  tetrisBlock.object3D.position.y = 7.5;
  tetrisBlock.object3D.position.z = -14;
  newBlock.unshift(tetrisBlock);
}

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!DOCTYPE html>

    <button type="button" name="start">start</button>
    <button type="button" name="pause">pause</button>
    <button type="button" name="reset">reset</button>
    <a-scene>
      <a-entity
        id="zigZag"
        collide-with-player=""
        hatch-type-shape=""
        data-hatch-type="hatch-type-empty"
        data-icon-type="rectangle"
        physics-scale-fix=""
        hatch-physics=""
        shadow="cast: false; receive: false"
        hatch-cursor-event-detection="enableCursorDetection: true"
        position="-4.0825353394644335 5.15966087923683 -17.160361366799766"
        color="#d5b949"
        class="clickable"
        <!--
        visible="true"
        --
      >
        ><a-box
          id="line6"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="5.039535339464433 3.3480091207631695 3.1603613667997656"
          color="#f1eaa3"
          material="color: #f1eaa3"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 89.99999999999999"
          child-test="true"
        ></a-box
        ><a-box
          id="line5"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="4.137505339464433 4.44454912076317 3.1603613667997656"
          color="#f1eaa3"
          material="color: #f1eaa3"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 89.99999999999999"
          child-test="true"
        ></a-box
        ><a-box
          id="line4"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="4.636015339464434 3.91959912076317 3.1603613667997656"
          color="#f1eaa3"
          material="color: #f1eaa3"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 0"
          child-test="true"
        ></a-box
      ></a-entity>
      <a-entity
        id="fork"
        collide-with-player=""
        hatch-type-shape=""
        data-hatch-type="hatch-type-empty"
        data-icon-type="rectangle"
        physics-scale-fix=""
        hatch-physics=""
        shadow="cast: false; receive: false"
        hatch-cursor-event-detection="enableCursorDetection: true"
        position="1.158747821160648 5.997102835551197 -14.335538215901849"
        color="#617ec2"
        class="clickable"
        rotation="0 0 0"
        scale="1 1 1"
        visible="true"
        ><a-box
          id="line3"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="-1.158747821160648 1.502897164448803 0.33553821590184896"
          color="#a3eaf1"
          material="color: #a3eaf1"
          class="clickable"
          scale="3 1.0000000000000002 1"
          rotation="0 0 89.99999999999999"
          child-test="true"
        ></a-box
        ><a-box
          id="line2"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="-0.60527 1.44434 0.33554"
          color="#a3edf1"
          material="color: #a3edf1"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 0"
          child-test="true"
        ></a-box
      ></a-entity>
      <a-box
        hatch-type-shape=""
        data-icon-type="box"
        id="box"
        shadow=""
        displayname="Box"
        position="0 9.09 -14"
        rotation="0 0 0"
        color="#4CC3D9"
        side="front"
        hatch-physics=""
        data-hatch-type="hatch-type-shape"
        material="color: #4CC3D9; side: front"
        geometry="primitive: box"
        physics-scale-fix=""
        hatch-cursor-event-detection="enableCursorDetection: true"
        collide-with-player=""
        class="clickable"
        scale="2 2 1"
        child-test="true"
        visible="true"
      ></a-box>
      <a-box
        id="line"
        collide-with-player=""
        hatch-type-shape=""
        geometry="primitive: box"
        data-hatch-type="hatch-type-shape"
        data-icon-type="box"
        physics-scale-fix=""
        hatch-physics=""
        shadow=""
        hatch-cursor-event-detection="enableCursorDetection: true"
        position="0 7.5 -14"
        color="#a3f1af"
        material="color: #a3f1af"
        class="clickable"
        scale="4 1 1"
        visible="true"
      ></a-box>
      <a-entity
        id="Ground"
        ground="dressing: none; groundSize: 100; ground: flat; groundTexture: none; grid: 1x1; groundColor: #333343; flatShading: true; gridColor: #B5B5B5"
        data-hatch-type="hatch-type-ground"
        data-is-droppable="false"
        data-icon-type="terrain"
        data-is-expandable="false"
        position="0 0 0"
        color="#62E9F7"
        visible="true"
        ><a-entity
          class="environment"
          position=""
          visible=""
          light=""
          data-not-selectable="true"
          data-hide-model="true"
          data-icon-type="light-hemisphere"
        ></a-entity
        ><a-entity
          class="environment"
          position=""
          light=""
          data-hide-model="true"
          visible="true"
          data-icon-type="light-directional"
        ></a-entity
        ><a-entity
          rotation=""
          visible=""
          data-not-selectable="true"
          class="environmentGround environment"
          scale=""
          shadow=""
        ></a-entity
        ><a-entity
          data-not-selectable="true"
          visible=""
          class="environmentDressing environment"
        ></a-entity
      ></a-entity>
      <a-plane
        id="plane"
        collide-with-player=""
        hatch-type-shape=""
        geometry="primitive: plane"
        data-hatch-type="hatch-type-shape"
        data-icon-type="plane"
        physics-scale-fix=""
        hatch-physics=""
        shadow=""
        hatch-cursor-event-detection=""
        position="-0.38406 0 -16.5359"
        color="#975c26"
        material="color: #975c26; shader: flat; side: back"
        rotation="90 0 0"
        scale="17.9 12.9 1"
        visible="true"
      ></a-plane>
    </a-scene>

ANSWER

Answered 2021-Dec-28 at 22:45

Not sure where did you get document.clone(element) as the document object doesn't seem to have a cloning utility.

There is a element.cloneNode() method which works fine - we can use it within a custom component, which will also handle the entity lifecycle:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        // make it smaller, and move it a bit
        new_element.setAttribute("scale", "0.2 0.2 0.2")
        new_element.setAttribute("position", {
          x: Math.random() * 6 - 3,
          y: 0.5,
          z: -1
        })
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">COPY</button>
<a-scene foo>
  <a-entity id="template">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

You can move it down with interval timeouts, or a tick / throttledTick handler. This could be done within a system, which would manage created entities (moving down, collisions).

A simple "moving down" version could look like this:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  //register system
  AFRAME.registerSystem("foo", {
    init: function() {
      // array of all registered elements
      this.elements = [];
      // set up the throttled version
      this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
    },
    register: function(el) {
      // push new element to the registered array
      this.elements.push(el)
    },
    tick: function() {
      // loop through all of the elements, and move them down
      for (el of this.elements) {
        const pos = el.object3D.position // this is more efficient than getAttribute("position")
        pos.y = (pos.y < 0) ? 2 : pos.y - 0.1; // use setAttribute() if you want getAttribute() to work
      }
    }
  })

  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      //  move it a bit, and make it visible
      this.el.setAttribute("position", {
        x: Math.random() * 6 - 3,
        y: 0.5,
        z: -2
      })
      this.el.setAttribute("visible", "true")

      // register the element in the system
      this.system.register(this.el)
    }
  })

  AFRAME.registerComponent("inserter", {
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        new_element.setAttribute("foo", "")
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">NEW</button>
<a-scene inserter>
  <a-entity id="template" visible="false" scale="0.2 0.2 0.2">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Sooner or later You'll probably run into performance issues (once there are several nodes) and it would be best to dive into mesh instancing (or at least check the performance guidelines)

Source https://stackoverflow.com/questions/70490307

QUESTION

A-frame responsive object

Asked 2021-Dec-22 at 01:25

I have a scene I've created using A-frame (https://aframe.io) where currently I have a green box glued to the camera at all times. When the camera turns, the box will move alongside the camera. What I'm wondering is how can I set the box to the top right corner of the screen no matter what the device is. Currently I'm using the position aframe property to position the box at the top right but on smaller devices the box won't show and on bigger devices it's in the middle of the screen. How can I make it so the box is glued to the top right no matter what the screen size is?

Current code:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    <a-camera>
                   <a-plane  color="green" scale="0.7 0.4 0.6" position="1.5 0.75 -2" rotation="5 -15 -2.5"></a-plane>

    </a-camera>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Fiddle containing code: https://jsfiddle.net/AidanYoung/0sjLrhfg/

ANSWER

Answered 2021-Dec-22 at 01:25

You could use the pythagorean theorem to place a green box at the top-left corner of the camera. However, I think given your use-case it would be easier to simply render a separate scene in the corner using the Renderer.setViewport() method

See the code sample below. In essence you're creating 2 scenes, and 2 cameras. The main scene will contain your 3D world and probably a perspective camera to look at it. The small scene will contain perhaps a simple plane and an orthographic camera to render it flat without perspective. Then on each frame you:

Clear the renderer's buffers
Render main across the entire window
Clear only depth buffer, preserving the color
Render small scene in a 100x100 box on top of step 2

const renderer = new THREE.WebGLRenderer({/*...*/});

// This prevents the renderer from clearing buffers in between renders
renderer.autoClear = false;

// Main will hold 3D objects
const sceneMain = new THREE.Scene();
scenemain.add(some3DObject);

// Small scene for top-left corner
const sceneSmall = new THREE.Scene();
sceneSmall.add(videoObject);

renderLoop() {
    // Clear renderer buffers
    renderer.clear();

    // Render main scene across full screen
    this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
    renderer.render(sceneMain, cameraMain);

    // Reset depth buffer
    renderer.clearDepth();
    
    // Render small scene in a 100x100 square
    this.renderer.setViewport(0, window.innerHeight - 100, 100, 100);
    renderer.render(sceneSmall, cameraSmall);
}

You can see a live demo of this "Picture-in-picture" approach in action in this example.

Source https://stackoverflow.com/questions/70387091

QUESTION

a-frame : how to make the hands follow the camera?

Asked 2021-Dec-19 at 07:56

I'm starting to learn aframe and want to use it with an Oculus Quest 2. I have the hands displayed and I'm trying to move around the VR world but when I move the hands don't move ... how to make the hands follow the camera? thanks

This is my code

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.0/dist/aframe-extras.min.js"></script>

    <script>


    </script>
  </head>
  <body>
    <a-scene>
        <a-entity id="rig" movement-controls position="0 0 0">
            <a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>
        </a-entity>

        <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
        <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
                                


      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

ANSWER

Answered 2021-Dec-19 at 07:56

I finally found ...

At the beginning I put the controllers in the camera ... but I had to put them in #rig

<a-entity id="rig" movement-controls position="0 0 0">
   <a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>

    <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly;"></a-entity>
    <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly;"></a-entity>
</a-entity>

Source https://stackoverflow.com/questions/70401740

QUESTION

gltf animations are not playing with flat shader

Asked 2021-Dec-13 at 12:05

I am using A-Frame 1.2.0. I have a gltf model on scene and I want to add flat shader this model.

 <a-scene vr-mode-ui="enabled: false;"gltf-model="dracoDecoderPath: js/draco/; "renderer="colorManagement: true; alpha: true;">
      <a-entity id="camera-rig">
                <a-camera id="camera" position="0 1.65 0" pivot="0 0 0" cursor="fuse:false;"></a-camera>
      </a-entity>
      <a-assets timeout="10000">
                <a-asset-item id="CesiumMan" src="assets/models/CesiumMan.gltf" response-type="arraybuffer"></a-asset-item>
      </a-assets>
      <a-gltf-model src="#CesiumMan" flat-shader="true" position='0 0 0' animation-mixer="clip:*"></a-gltf-model>
</a-scene>

And my flat shader code is from here

const FlatShader = {
    schema: {default: true} ,

  init() {
    this.el.addEventListener('object3dset', this.update.bind(this));
  },//init

  update() {
    const mesh = this.el.getObject3D('mesh');
    const { data } = this;
    if (!mesh) {
      return;
    }
    mesh.traverse(function(node) {
      if (node.isMesh && data) {
        const mat1 = new THREE.MeshBasicMaterial();
        node.material = mat1;
        node.material.needsUpdate = true;
      }
    });

  },//update

}; // FlatShader

export default FlatShader

Flat shader is working but after added flat shader, model animations are not working. Model stays in its static pose.

Any ideas what could be causing the problem ? I may be missing something, but i have no clue how to solve this.

ANSWER

Answered 2021-Dec-13 at 12:05

In a-frames version of threejs (modified 125) , You need to "tell" the material, that your model utilizes "skinning" for animations:

 material.skinning = true;

Since three r.129 this is no longer necessary

So, all you need is to change the Materials skinning property to true:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // wait for the model to load
      this.el.addEventListener("model-loaded", evt => {
        // create new material - with it skinning flag raised
        const new_material = new THREE.MeshNormalMaterial({skinning: true});
        const mesh = this.el.getObject3D('mesh');

        // traverse the mesh and apply the material
        mesh.traverse(node => {
          if (!node.isMesh) return;
          node.material = new_material;
          node.material.needsUpdate = true;
        })
      })
    }
  })

</script>
<a-scene>
  <a-assets>
    <a-asset-item id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/20656ea38ce797a8dff0d2915b656aff75d32a71/2.0/CesiumMan/glTF-Binary/CesiumMan.glb"></a-asset-item>
  </a-assets>
    <a-entity position="1 0 -3" gltf-model="#model" animation-mixer="clip: *" foo></a-entity>
  <a-entity position="-1 0 -3" gltf-model="#model" animation-mixer="clip: *"></a-entity>
</a-scene>

Cesium man model is from the Kronos Group glTF sample models repo

Source https://stackoverflow.com/questions/70333485

Community Discussions, Code Snippets contain sources that include Stack Exchange Network