webVR Aframe案例学习

2022-08-12 18:32:40 阅读：136 来源： 互联网

标签：function el webVR -- setAttribute Aframe 案例 addEventListener var

<!--
 * @Description: 
 * @Version: 1.0
 * @Author: 努力才能逃离
 * @Date: 2022-08-02 10:01:51
 * @LastEditors: 努力才能逃离
 * @LastEditTime: 2022-08-03 10:48:33
-->
<html>

<head>
  <!-- <script src="./js/aframe.min.js"></script> -->
  <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
  <!-- <script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script>
  <script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script> -->
</head>

<body>
  <a-scene>
    <!-- 资源管理系统
        资产管理系统使浏览器缓存资源更容易（例如，图像，视频，模型），并且A-Frame框架将确保所有的资源都在渲染之前被获取到。
        -->
    <a-assets>
      <img src="https://zxtss.github.io/images/ETH.png" id="box-bg">
      <img src="https://zxtss.github.io/images/background.webp" id="sky-bg">
      <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      <!-- <audio id="audio" src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay preload></audio> -->
    </a-assets>
    <!-- color="#4CC3D9"  -->
    <a-box id="box" hide-on-click="target:#box2" src="#sky-bg" position="0 2 -5" rotation="0 45 45" scale="1 1 1"
      animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 1500; loop: true">
    </a-box>
    <a-box id="box2" src="#sky-bg" position="2 5 -5" rotation="0 45 45" scale="1 1 1"
      animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 1500; loop: true" handle-events>
    </a-box>
    <!-- 设置地面    （repeat）格子化效果 -->
    <a-plane rotation="-90 0 0" width="30" height="30" src="#groundTexture" repeat="10 10"></a-plane>
    <!-- 背景颜色 -->
    <a-sky src="#sky-bg"></a-sky>
    <!-- 光源 -->
    <a-light type="ambient" color="#445451"></a-light>
    <a-light type="point" intensity="2" position="2 4 4"></a-light>
    <!-- 音频 -->
    <!-- <a-sound src="#audio" autoplay="true" position="-3 1 -4"></a-sound> -->
    <!-- <a-text value="Hello, A-Frame!" color="#BBB"
        position="-0.9 0.2 -3"></a-text> -->
    <a-camera>
      <a-cursor animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
        event-set__1="_event: mouseenter; color: #0092d8" event-set__2="_event: mouseleave; color: black">
      </a-cursor>
    </a-camera>
    <a-entity log="Hello A-Frame">
      <a-entity position="2 2 -10" geometry="primitive: sphere" material="color: red"></a-entity>
      <a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite">
      </a-animation>
    </a-entity>
  </a-scene>

  <script>
    //注册隐藏事件
    AFRAME.registerComponent('hide-on-click', {
      dependencies: ['raycaster'],
      schema: {
        target: { type: 'selector' }
      },
      init: function () {
        var data = this.data;
        var el = this.el;
        el.addEventListener('click', function () {
          el.setAttribute('visible', false);
          data.target.setAttribute('visible', true);
        });
      }
    });
    //注册log事件
    AFRAME.registerComponent('log', {
      schema: { type: 'string' },
      init: function () {
        var stringLog = this.data;
        console.log(stringLog);
      }
    })
    AFRAME.registerComponent('handle-events', {
      init: function () {
        var el = this.el;
        el.addEventListener('mouseenter', function () {
          el.setAttribute('color', '#24CAFF');
        });
        el.addEventListener('mouseleave', function () {
          el.setAttribute('color', '#EF2D5E');
        });
        el.addEventListener('click', function () {
          el.setAttribute('scale', {
            x: 2,
            y: 1,
            z: 2
          });
        });
      }
    });
  </script>
</body>

</html>

资产管理、事件绑定、组件渲染

标签：function,el,webVR,--,setAttribute,Aframe,案例,addEventListener,var
来源： https://www.cnblogs.com/wuhairui/p/16580974.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webVR Aframe案例学习