webVR Aframe案例学习

 

<!--
 * @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>

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

 

posted @ 2022-08-12 18:14  herry菌  阅读(105)  评论(0)  编辑  收藏  举报