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-20e0-4e18-959a-e52f16c3d173_Horse.glb"></a-asset-item>
    <a-asset-item id="flamingo" src="//repo.bfw.wiki/bfwrepo/threemodel/ar/7a53a7ba-20e0-4e18-959a-e52f16c3d173_Flamingo.glb"></a-asset-item>
    <a-asset-item id="storch" src="//repo.bfw.wiki/bfwrepo/threemodel/ar/7a53a7ba-20e0-4e18-959a-e52f16c3d173_Stork.glb"></a-asset-item>
    <a-asset-item id="parrot" src="//repo.bfw.wiki/bfwrepo/threemodel/ar/7a53a7ba-20e0-4e18-959a-e52f16c3d173_Parrot.glb"></a-asset-item>
		<a-asset-item id="reticle"
					  src="//repo.bfw.wiki/bfwrepo/threemodel/ar/4be0fb1b-d714-4a6c-8cb4-a80f530ccd2e_reticle.glb"
					  response-type="arraybuffer"></a-asset-item>
	</a-assets>
  
  <!-- Use AR raycaster, and set raycaster to ignore all A-Frame objects like logos. -->
  <a-entity ar-raycaster raycaster="objects:none"></a-entity>

	<a-camera position="0 1.2 0"></a-camera>

	<!-- Environment for 2D and VR viewing. It's auto-hidden in AR mode. -->
	<a-entity environment="preset: default; lighting: none; shadow: none; lightPosition: 0 10 0"
			  hide-in-ar-mode></a-entity>

	<a-entity id="dino" position="0 0 0" scale="1 1 1">
    <!-- horses -->
    <a-entity position="0 0 -30" rotation="0 0 0"
				  gltf-model="#horse"
          scale="0.01 0.01 0.01"
				  animation-mixer
          animation="property: position; to: 0 0 30; dur: 20000; easing: linear; loop: true"
				  shadow="cast: true; receive: false"></a-entity>
		<a-entity position="-2 0 -35" rotation="0 0 0"
				  gltf-model="#horse"
          scale="0.01 0.01 0.01"
				  animation-mixer="timeScale: 0.95"
          animation="property: position; to: -2 0 25; dur: 19000; easing: linear; loop: true"
				  shadow="cast: true; receive: false"></a-entity>
		<a-entity position="1.5 0 -32" rotation="0 0 0"
				  gltf-model="#horse"
          scale="0.01 0.01 0.01"
				  animation-mixer
          animation="property: position; to: 1.5 0 28; dur: 20000; easing: linear; loop: true"
				  shadow="cast: true; receive: false"></a-entity>
		<a-entity position="3 0 -37" rotation="0 0 0"
				  gltf-model="#horse"
          scale="0.01 0.01 0.01&qu.........完整代码请登录后点击上方下载按钮下载查看