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>
资产管理、事件绑定、组件渲染
标签：function,el,webVR,--,setAttribute,Aframe,案例,addEventListener,var 来源： https://www.cnblogs.com/wuhairui/p/16580974.html