我使用了
Github
并将其插入样板页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World! ⢠A-Frame</title>
<meta name="description" content="Hello, World! ⢠A-Frame">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.0/aframe-master.js"></script>
<script>
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);
});
}
});
</script>
</head>
<body>
<a-scene>
<a-entity camera>
<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 id="box" cursor-listener geometry="primitive: box" material="color: blue" position="0, 0, -4"></a-entity>
</a-scene>
</body>
</html>
在这段代码片段中,我将cdn用于框架0.7.0,但也尝试了0.7.1和master。
光标显示为“单击”立方体一次,更改其颜色。无法在桌面和VR模式下移动视图。例如,在VR模式下,当我移动头部时,矩形保持在视图的直接中心。
这里是现场直播
codepen
.
如何修复代码以允许我移动相机?
