|
A-Frame官网
官网首页有许多案例，上面有很多各种效果展示。
文档
学习的话，就看最新的英文文档，网上找到了中文文档，跟着写了案例，结果有些效果根本无法实现，例如动画，最后发现中文文档还是很早以前的版本。
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene device-orientation-permission-ui="enabled: false" cursor="rayOrigin: mouse; fuse: false" raycaster="objects: .raycastable">
<a-assets>
<audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
<img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
<img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
<img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
<img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
</a-assets>
<a-sky id="image-360" radius="10" src="#city"></a-sky>
<a-entity id="box1" log="Hello, Box!" class="link" position="1 1 -6" geometry="primitive: plane; height: 1; width: 1" material="shader: flat; src: #cubes-thumb"></a-entity>
<a-box id="box" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-entity camera look-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat">
</a-entity>
</a-entity>
<a-entity class="clickable" cursor id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
</a-scene>
<script>
let sceneEl = document.querySelector('a-scene')
let sky = document.querySelector('a-sky')
let box = document.querySelector('#box')
console.log('imgEl', box);
AFRAME.registerComponent('cursor-listener', {
init: function() {
var lastIndex = -1;
var COLORS = ['red', 'green', 'blue'];
this.el.addEventListener('click', function(evt) {
lastIndex = (lastIndex + 1) % COLORS.length;
this.setAttribute('material', 'color', COLORS[lastIndex]);
console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
});
console.log('this', this);
box.addEventListener('click', (e) => {
console.log("点击了天蓝色方块", e);
})
AFRAME.registerComponent('log', {
schema: {
type: 'string'
},
init: function() {
var stringToLog = this.data;
console.log(stringToLog);
}
});
</script>
</body>
</html>
写了个小demo结果遇到了很多问题，总结如下：
- 如何实现点击场景中的某个元素
- 如何正确显示png图片
- 如何让初始化时的提示弹窗不显示
- 如何使其他元素和sky同步旋转
问题解决方法
-
给a-scene标签添加cursor=“rayOrigin: mouse; fuse: false”；设置这个之后鼠标不管悬浮在页面上哪个地方都有有小手的样式，如果不想监听所有的元素的点击事件，我们需要再设置有哪些具体的元素是可以被监听的，需要再加一个属性raycaster=“objects: .clickable” ，objects的值代表的是只有类名为clickable的元素可以被点击。其他设置参考官方文档。这里还需要注意一点，这个clickable需要设置在最内层的元素上才有效 <--无效的写法-->
<a-entity position="-1 0.5 -3" id="box" material="color: skyblue" class="port-point" class="clickable">
<a-image position="-1 0.5 -3" width="2" height="2" id="dot" src="#point" alpha-test="0.7"></a-image>
</a-entity>
<--正确的写法-->
<a-entity position="-1 0.5 -3" id="box" material="color: skyblue" class="port-point">
<a-image position="-1 0.5 -3" width="2" height="2" id="dot" src="#point" alpha-test="0.7" class="clickable"></a-image>
</a-entity>
-
这个解决方法是在网上查找得知的需要给图片加上这个属性alpha-test=“0.7” <a-image position="-1 0.5 -3" width="2" height="2" id="dot" src="#point" alpha-test="0.7" class="clickable"></a-image>
-
在a-scene标签上加上device-orientation-permission-ui=“enabled: false” -
一开始的思路是直接更改a-sky的rotation属性，运行起来sky元素确实如期望那样的旋转了，但是其他元素却固定不动。知道后来突然看到camera，这个是更改视角的，通过设置camera，然后更改旋转角度，所有的元素，全部同步旋转。
<a-entity camera position="0 0 1" id="box" material="color: skyblue" ></a-entity>
box.setAttribute("animation",`property: rotation;to:${this.x} ${this.y} ${this.z};dur:1000`)
|