aframe-ar实现浏览器上运行的vr xr三维马儿奔跑鸟儿飞翔动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：aframe-ar实现浏览器上运行的vr xr三维马儿奔跑鸟儿飞翔动画效果代码，里面浏览器的陀螺仪实现ar效果，最终实现了xr效果。

代码标签： aframe-ar 浏览器运行 vr xr 三维马儿奔跑鸟儿飞翔动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    /* CSS files add styling rules to your content */

body {
        font-family: helvetica, arial, sans-serif;
        margin: 2em;
}

h1 {
        /*  font-style: italic;
          color: #373fff;
        */
        font-size: 1.35em;
}

div#text {
        position: absolute;
        left: 6px;
        top: 6px;
        padding: 6px;
        /*
        text-shadow: 0 0 5px white;
        */
        max-width: 350px;
        background-color: rgba(255, 255, 255, 0.7)
}
</style>
        <!-- import the webpage's javascript files -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe.1.04.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-extras.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-environment-component.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-ar.3.4.5.js"></script>
  
<script>
    // https://github.com/stspanho/aframe-hit-test
// See also https://github.com/aframevr/aframe/pull/4356
AFRAME.registerComponent('hide-in-ar-mode', {
  // Set this object invisible while in AR mode.
  init: function () {
    this.el.sceneEl.addEventListener('enter-vr', (ev) => {
      this.wasVisible = this.el.getAttribute('visible');
      if (this.el.sceneEl.is('ar-mode')) {
        this.el.setAttribute('visible', false);
      }
    });
    this.el.sceneEl.addEventListener('exit-vr', (ev) => {
      if (this.wasVisible) this.el.setAttribute('visible', true);
    });
  }
});

AFRAME.registerComponent('ar-shadows', {
  // Swap an object's material to a transparent shadows-only material while
  // in AR mode. Intended for use with a ground plane. The object is also
  // set visible while in AR mode, this is useful if it's hidden in other
  // modes due to them using a 3D environment.
  schema: {
    opacity: {default: 0.3}
  },
  init: function () {
    this.el.sceneEl.addEventListener('enter-vr', (ev) => {
      this.wasVisible = this.el.getAttribute('visible');
      if (this.el.sceneEl.is('ar-mode')) {
        this.savedMaterial = this.el.object3D.children[0].material;
        this.el.object3D.children[0].material = new THREE.ShadowMaterial();
        this.el.object3D.children[0].material.opacity = this.data.opacity;
        this.el.setAttribute('visible', true);
      }
    });
    this.el.sceneEl.addEventListener('exit-vr', (ev) => {
      if (this.savedMaterial) {
        this.el.object3D.children[0].material = this.savedMaterial;
        this.savedMaterial = null;
      }
      if (!this.wasVisible) this.el.setAttribute('visible', false);
    });
  }
});
</script>
  
  <script>

    // AFRAME no longer sends intersection event every time intersection changes position;
    // this component is modified from docs to move a different entity than the one hit.
    AFRAME.registerComponent('raycaster-move', {
        schema: {
            target: {type: 'selector'}
        },
        init: function () {
            // Use events to figure out what raycaster is listening so we don't have to
            // hardcode the raycaster.
            this.el.addEventListener('raycaster-intersected', evt => {
                this.raycaster = evt.detail.el;
            });
            this.el.addEventListener('raycaster-intersected-cleared', evt => {
                this.raycaster = null;
            });
        },
        update: function (oldData) {
            //
        },
        tick: function () {
            if (!this.raycaster) { return; }  // Not intersecting.

            let intersection = this.raycaster.components.raycaster.getIntersection(this.el);
            if (!intersection) { return; }
            //console.log(intersection.point);
            this.data.target.setAttribute("position", intersection.point);
        }
    });

    window.addEventListener('click', function () {
      // Put the logo where the mark is.
      let position = document.querySelector('#mark').getAttribute('position');      
      document.getElementById('dino').setAttribute('position', position);
      document.getElementById('light').setAttribute('position', {
        x: (position.x - 2),
        y: (position.y + 4),
        z: (position.z + 2)
      });
    });

  </script>
</head>
<body>

<a-scene ar="worldSensing:true" raycaster-move="target:#mark">
        <a-assets>
                <!-- Model source: https://github.com/dataarts/3-dreams-of-black
         https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf -->
    <a-asset-item id="horse" src="//repo.bfw.wiki/bfwrepo/threemodel/ar/7a53a7ba.........完整代码请登录后点击上方下载按钮下载查看