Thiết kế website giá rẻ

Question

I want to show a chemical reaction with A frame. If user shows marker of Hydrozen and Oxygen then it will show Water molicule . Water molicule will show up in repalce of Oxgen marker. And It would better if hydrozen marker if close to near of oxygen then the chemical reaction will happen other wise not .Bellow the code i tried with.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>Hello, world!</title>
  <!-- include A-Frame library -->
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <!-- include AR.js for A-Frame -->
  <script src="https://cdn.rawgit.com/jeromeetienne/ar.js/1.7.4/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
  <a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
    <!-- Preload images -->
    <a-assets>
      <img id="card-C" src="images/chemistry/card-C.png">
      <img id="card-Cl" src="images/chemistry/card-Cl.png">
      <img id="card-H" src="images/chemistry/card-H.png">
      <img id="card-N" src="images/chemistry/card-N.png">
      <img id="card-Na" src="images/chemistry/card-Na.png">
      <img id="card-O" src="images/chemistry/card-O.png">
      <img id="card-Si" src="images/chemistry/card-Si.png">

      <img id="label-C" src="images/chemistry/label-C.png">
      <img id="label-H" src="images/chemistry/label-H.png">
      <img id="label-N" src="images/chemistry/label-N.png">
      <img id="label-O" src="images/chemistry/label-O.png">

      <img id="shadow-0" src="images/chemistry/shadow-0.png">
      <img id="shadow-1" src="images/chemistry/shadow-1.png">
      <img id="shadow-2" src="images/chemistry/shadow-2.png">
      <img id="shadow-3" src="images/chemistry/shadow-3.png">
      <img id="shadow-4" src="images/chemistry/shadow-4.png">
      <img id="shadow-5" src="images/chemistry/shadow-5.png">
      <img id="shadow-6" src="images/chemistry/shadow-6.png">
      <img id="shadow-7" src="images/chemistry/shadow-7.png">
      <img id="shadow-8" src="images/chemistry/shadow-8.png">
    </a-assets>

    <!-- Define markers and objects -->
    <a-marker type='barcode' value='0'>
      <a-sphere position="0 1 0" radius="0.2" color="#FF6666" src="#label-H"></a-sphere>
      <a-plane position="0 0 0" rotation="-90 0 0" width="1.25" height="1.25" color="#FFC0C0" src="#card-H"></a-plane>
      <a-plane position="0 0.02 0" rotation="-90 0 0" width="1.025" height="1.025" src="#shadow-1" opacity="0.3"></a-plane>
    </a-marker>

    <a-marker type='barcode' value='1'>
      <a-sphere position="0 1 0" radius="0.2" color="#FF6666" src="#label-H"></a-sphere>
      <a-plane position="0 0 0" rotation="-90 0 0" width="1.25" height="1.25" color="#FFC0C0" src="#card-H"></a-plane>
      <a-plane position="0 0.02 0" rotation="-90 0 0" width="1.025" height="1.025" src="#shadow-1" opacity="0.3"></a-plane>
    </a-marker>

    <a-marker type='barcode' value='2' id="marker-O">
      <a-sphere position="0 1 0" radius="0.27" color="#6666FF" src="#label-O"></a-sphere>
      <a-plane position="0 0 0" rotation="-90 0 0" width="1.25" height="1.25" color="#CCCCFF" src="#card-O"></a-plane>
      <a-plane position="0 0.02 0" rotation="-90 0 0" width="1.025" height="1.025" src="#shadow-6" opacity="0.3"></a-plane>
      <a-animation attribute="rotation" dur="2000" to="0 360 0" repeat="indefinite"></a-animation>
    </a-marker>

    <a-marker type='barcode' value='3'>
      <a-sphere position="0 1 0" radius="0.3" color="#FF8866" src="#label-C"></a-sphere>
      <a-plane position="0 0 0" rotation="-90 0 0" width="1.25" height="1.25" color="#FFD0C0" src="#card-C"></a-plane>
      <a-plane position="0 0.02 0" rotation="-90 0 0" width="1.025" height="1.025" src="#shadow-5" opacity="0.3"></a-plane>
      <a-animation attribute="rotation" dur="2000" to="0 360 0" repeat="indefinite"></a-animation>
    </a-marker>

    <!-- Define the camera -->
    <a-entity camera></a-entity>

    <!-- Attach marker handler component -->
    <a-entity marker-handler></a-entity>
  </a-scene>


</body>
</html>

I asked GPT for the solution but found no proper solution. Then I comeup with an idea that if all the marker found then replace all the shape with new shape. but not worked .

  <!-- JavaScript to handle marker detection -->
  <script>
    // Get the <a-scene> element
    const scene = document.querySelector('a-scene');

    // Get all markers
    const markers = document.querySelectorAll('a-marker');

    // Array to track marker states
    let markerStates = new Array(markers.length).fill(false);

    // Function to check if all markers are detected
    function checkMarkers() {
      return markerStates.every(state => state);
    }

    // Event listeners for marker found and lost events
    markers.forEach((marker, index) => {
      marker.addEventListener('markerFound', () => {
        markerStates[index] = true;
        if (checkMarkers()) {
          // Check if the red sphere already exists
          if (!scene.querySelector('#redSphere')) {
            // Create a new red sphere
            const newSphere = document.createElement('a-sphere');
            newSphere.setAttribute('id', 'redSphere');
            newSphere.setAttribute('position', '0 2 0');
            newSphere.setAttribute('radius', '0.5');
            newSphere.setAttribute('color', '#FF0000');
            scene.appendChild(newSphere);
          }
        }
      });

      marker.addEventListener('markerLost', () => {
        markerStates[index] = false;
        // Remove the red sphere if any marker is lost and no markers are detected
        if (!checkMarkers()) {
          const newSphere = scene.querySelector('#redSphere');
          if (newSphere) {
            newSphere.parentNode.removeChild(newSphere);
          }
        }
      });
    });
  </script>

Thiết kế website giá rẻ

Danh mục

How Can I replace a shape if specific marker arrive in A-Frame