Attaching and detaching children to and from parents using A-Frame

Question

Attaching and detaching children to and from parents using A-Frame

I'm currently working on developing an application similar to Google Street View that is able to capture and display images in a 360 Equirectangular format using Aframe.

https://i.sstatic.net/hDSCv.gif

One idea I have been considering involves making an image primitive, like <a-image/>, a child of the camera element, similar to how the cursor behaves. This way, the image can be detached from the camera at the exact location it is focused on.

I am seeking guidance on whether this method of attaching and detaching the image is feasible, or if there may be a more efficient approach to achieving this. Any suggestions or advice would be greatly appreciated!

javascript three.js aframe virtual-reality

Answer 1

Answer №1

Instead of changing the parent, I suggest trying a different method.

The outlined rectangle is linked to the camera
When clicked (or similar action), a new plane is generated and connected to the scene. Its transformation is copied from the outlined world transform;

Here's an example:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("plane-creator", {
    init: function() {
      const tmpV = new THREE.Vector3(0, 0, 0); // helper for storing position vector
      const tmpQ = new THREE.Quaternion(); // helper for storing quaternion

      document.body.addEventListener("click", evt => {
        const mesh = this.el.getObject3D("mesh"); // obtain wireframed plane
        mesh.getWorldPosition(tmpV); // get world position
        mesh.getWorldQuaternion(tmpQ); // get world rotation as quaternion

        // create a new plane
        const newPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshNormalMaterial);
        newPlane.position.copy(tmpV); // apply position
        newPlane.quaternion.copy(tmpQ); //apply quaternion
        this.el.sceneEl.object3D.add(newPlane); // attach new plane to scene
      })
    }
  })
</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>
  <a-sky color="#ECECEC"></a-sky>
  <a-camera>
    <a-plane position="0 0 -1.5" material="wireframe: true" plane-creator></a-plane>
  </a-camera>
</a-scene>

It might be better to replicate the entire matrix, but I opted for a simple approach for clarity.

Answer 2

Instead of changing the parent, I suggest trying a different method.

The outlined rectangle is linked to the camera
When clicked (or similar action), a new plane is generated and connected to the scene. Its transformation is copied from the outlined world transform;

Here's an example:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("plane-creator", {
    init: function() {
      const tmpV = new THREE.Vector3(0, 0, 0); // helper for storing position vector
      const tmpQ = new THREE.Quaternion(); // helper for storing quaternion

      document.body.addEventListener("click", evt => {
        const mesh = this.el.getObject3D("mesh"); // obtain wireframed plane
        mesh.getWorldPosition(tmpV); // get world position
        mesh.getWorldQuaternion(tmpQ); // get world rotation as quaternion

        // create a new plane
        const newPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshNormalMaterial);
        newPlane.position.copy(tmpV); // apply position
        newPlane.quaternion.copy(tmpQ); //apply quaternion
        this.el.sceneEl.object3D.add(newPlane); // attach new plane to scene
      })
    }
  })
</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>
  <a-sky color="#ECECEC"></a-sky>
  <a-camera>
    <a-plane position="0 0 -1.5" material="wireframe: true" plane-creator></a-plane>
  </a-camera>
</a-scene>

It might be better to replicate the entire matrix, but I opted for a simple approach for clarity.

Attaching and detaching children to and from parents using A-Frame

Answer №1

Similar questions

Design a button in d3.js that toggles the visibility of a rectangle and text

How to Fetch a Singular Value from a Service in Angular 4 Using a Defined Pattern

Utilizing Bootstrap Plugins with Nuxt.js: A Step-by-Step Guide

more efficient method for gathering information and refreshing a database

Multi-dimensional array: Include an extra array if the desired value is not located

Steering clear of ng-include while still maintaining versatility in displaying sub-templates

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

How can you spot the conclusion of different lines that refuse to remain in place?

Issue: window.XMLhttpRequest is not a valid constructor within Angular framework

How can I access my API by connecting Node.js to MongoDB remotely?

Efficiently Embedding Images into Canvas Elements

Ways to effortlessly activate an angular directive once the page has been fully loaded

The image slider is blocking the dropdown functionality of the navbar on mobile devices

The master of the site instructs the pages to wait for loading...but the site somehow manages to partially come up

The passing of React parent component props to the child component is not functioning as expected

Adjust the value of a select box to the chosen option using JQuery

ExpressJS encountered an error due to an unsupported MIME type ('text/html') being used as a stylesheet MIME type

Is there a way to trim the string after the second occurrence of an underscore?

Exploring the functionality of setFromSphericalCoords in Three.js

Determine the image's position in relation to its parent element while factoring in any vertical offset