<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebVR Example</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene vr-mode-ui="enabled: true"> <a-camera position="0 1.6 0"></a-camera> <a-box position="0 0 -5" color="red"></a-box> <a-sky color="lightblue"></a-sky> </a-scene> <script> AFRAME.registerComponent('move', { tick: function() { // ユーザーのキーボードやマウスの入力に基づいて移動する処理を記述します // この例では、キーボードの矢印キーに応じてカメラを移動させています var cameraEl = this.el.querySelector('a-camera'); var position = cameraEl.getAttribute('position'); var moveAmount = 0.1; // 移動量の設定 if (this.keys.ArrowUp) { position.z -= moveAmount; } if (this.keys.ArrowDown) { position.z += moveAmount; } if (this.keys.ArrowLeft) { position.x -= moveAmount; } if (this.keys.ArrowRight) { position.x += moveAmount; } cameraEl.setAttribute('position', position); }, // キーボードの入力を受け取るためのイベントリスナーを設定します init: function() { this.keys = {}; var self = this; window.addEventListener('keydown', function(event) { self.keys[event.key] = true; }); window.addEventListener('keyup', function(event) { self.keys[event.key] = false; }); } }); </script> <script> // カメラに移動コンポーネントを追加します document.querySelector('a-camera').setAttribute('move', ''); </script> </body> </html>