A-Frame Course - Source of /examples/2100-locomotion-05-continuous-vehicle-multiple.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>

    <script src="https://unpkg.com/aframe-environment-component@1.3.7/dist/aframe-environment-component.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.4/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-object-parent@0.1.0/index.min.js"></script>
    <script>
      // Change the parent of an object without changing its transform.
      AFRAME.registerComponent("objectparent", {
        schema: {
          parent: { type: "selector" },
        },

        update() {
          const matches = document.querySelectorAll(`#${parent.id}`);
          if (matches.length > 1) {
            console.warn(
              `object-parent matches duplicate entities for new parent ${parent.id}`
            );
          }

          const newParent = this.data.parent.object3D;
          this.reparent(newParent);
        },

        remove() {
          const originalParentEl = this.el.parentEl;
          this.reparent(originalParentEl.object3D);
        },

        reparent(newParent) {
          const object = this.el.object3D;
          const oldParent = object.parent;

          if (object.parent === newParent) {
            return;
          }

          objectEl = (o) => {
            if (o.type === "Scene") {
              return this.el.sceneEl;
            } else {
              return o.el;
            }
          };

          //console.log(`Reparenting ${object.el.id} from ${objectEl(oldParent).id} to ${objectEl(newParent).id}`);

          newParent.attach(object);
        },
      });
    </script>
  </head>
  <body>
    <a-scene>
         <a-assets>
       <audio
          id="sonar"
          src="https://cdn.glitch.global/80978ab7-9db6-45ae-bc43-4fab16bdbb6e/mouth-revving-82970.mp3?v=1749034624759"
        ></audio>
      </a-assets>


      <a-entity
        environment="preset:forest"
        cursor="rayOrigin: mouse"
      ></a-entity>



      <a-entity id="rig" movement-controls="constrainToNavMesh: false; " event-set__moved="_target:#car1; color:green" sound="src:#sonar;on:moved">
        <a-camera ></a-camera>
        <a-entity id="lefthand" hand-controls="hand: left" ></a-entity>
        <a-entity id="righthand" laser-controls="hand: right"></a-entity>

        <a-box id="car1" width="3.5" depth="4" height="0.5" color="orange">
          <a-sphere
            radius="0.1"
            color="green"
            position="-0.5 1 0"
            event-set__click="_target: #car1; objectparent.parent: #rig"
          >
          </a-sphere>
          <a-sphere
            radius="0.1"
            color="red"
            position="0.5 1 0"
            event-set__click="_target: #car1; objectparent.parent: a-scene"
          >
          </a-sphere>
        </a-box>
        <a-box
          id="car2"
          width="3.5"
          depth="4"
          height="0.5"
          color="blue"
          objectparent="parent: a-scene"
        >
          <a-sphere
            radius="0.1"
            color="green"
            position="-0.5 1 0"
            event-set__click="_target: #car2; objectparent.parent: #rig"
          >
          </a-sphere>
          <a-sphere
            radius="0.1"
            color="red"
            position="0.5 1 0"
            event-set__click="_target: #car2; objectparent.parent: a-scene"
          >
          </a-sphere>
        </a-box>
      </a-entity>
    </a-scene>
  </body>
</html>