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

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

代码语言：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].materia.........完整代码请登录后点击上方下载按钮下载查看