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].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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0