Question

请帮我弄清楚。我需要创建一个没有网络标记的增强现实。在解决方案中我可以添加一个3D模型，但是当我移动相机时，模型会改变位置，因此在我的示例中，我使用aframe和aframe-ar.js。

<head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/cfe5f316/dist/aframe-extras.js"></script>
</head>
    <script>
      // Component that places trees where the ground is clicked
      AFRAME.registerComponent('tap-place', {
        init: function() {
          const ground = document.getElementById('ground')
          ground.addEventListener('click', event => {
            console.log('event registered');
            const newElement = document.createElement('a-entity')
            const touchPoint = event.detail.intersection.point;
            console.log('touchPoint', touchPoint);
            newElement.setAttribute('position', touchPoint)
            newElement.setAttribute('id', 'dino')
            const randomYRotation = Math.random() * 360
            newElement.setAttribute('rotation', '0 ' + randomYRotation + ' 0')
           // newElement.setAttribute('visible', 'false')
          //  newElement.setAttribute('scale', '0.0001 0.0001 0.0001')
            newElement.setAttribute('gltf-model', '#dino-model')
            this.el.sceneEl.appendChild(newElement)
            newElement.addEventListener('model-loaded', () => {
              // Once the model is loaded, we are ready to show it popping in using an animation
              newElement.setAttribute('visible', 'true')
              newElement.setAttribute('animation', {
                property: 'scale',
                to: '0.01 0.01 0.01',
                easing: 'easeOutElastic',
                dur: 800,
              })
            })
          })
        },
      })
    </script>
  </head>
<body>
    <a-scene embedded arjs='sourceType: webcam;' id='canvas' tap-place>
        <!-- <a-camera ar-raycaster raycaster cursor="fuse:false"> </a-camera> -->
        <a-camera 
         position="0 8 0"
         raycaster="objects: .cantap"
         cursor="
          fuse: false;
          rayOrigin: mouse;">
        </a-camera>
         <a-entity
        light="type: directional;
               intensity: 0.8;"
        position="1 4.3 2.5">
      </a-entity>

      <a-light type="ambient" intensity="1"></a-light>
        <a-assets>
            <a-asset id="dino-model" src="dino.glb"></a-asset>
        </a-assets>
       <a-entity
        id="ground"
        class="cantap"
        geometry="primitive: box"
        material="color: #ffffff; transparent: true; opacity: 0.0"
        scale="1000 2 1000"
        position="0 -1 0">
      </a-entity>
    </a-scene>
</body>

</html>

需要没有标记的基于Web的AR解决方案

0 个答案: