aframe-space-navigator-controls
aframe-space-navigator-controls copied to clipboard
Published
20 hours ago •
archilogic-com
archilogic-com
3D Mouse controls for A-Frame VR.
Space Navigator Controls for WebGL
Connects "Space Navigator" 3D mouse by 3Dconnexion to JavaScript via gamepad browser API. Based on Three.js webGL library with support for A-Frame. Inspired and forked from the awesome aframe-gamepad-controls component by Don McCurdy. Provided by 3d.io
Demos:
Usage
THREE.js
<head>
<!-- Load THREE.js lib -->
<script src=""></script>
<!-- Load Space Navigator code -->
<script src="https://rawgit.com/archilogic-com/aframe-space-navigator-controls/master/dist/aframe-space-navigator-controls.js"></script>
</head>
<body>
<script>
var options = {
rollEnabled: false,
movementEnabled: true,
lookEnabled: true,
rollEnabled: true,
invertPitch: false,
fovEnabled: false,
fovMin: 2,
fovMax: 115,
rotationSensitivity: 0.05,
movementEasing: 3,
movementAcceleration: 700,
fovSensitivity: 0.01,
fovEasing: 3,
fovAcceleration: 5,
invertScroll: false
}
var controls = new THREE.SpaceNavigatorControls(options)
var camera = new THREE.Camera(60, window.innerWidth / window.innerHeight, 1, 1000)
// update on every frame frame
function animate() {
requestAnimationFrame(animate)
// update space navigator
controls.update()
// update camera position
camera.position.copy(controls.position)
// update camera rotation
camera.rotation.copy(controls.rotation)
// when using mousewheel to control camera FOV
camera.fov = controls.fov
camera.updateProjectionMatrix()
render()
}
</script>
</body>
A-Frame
<head>
<!-- Load THREE.js lib -->
<script src=""></script>
<!-- Load SpaceNavigatorControls -->
<script src="https://rawgit.com/archilogic-com/aframe-space-navigator-controls/master/dist/aframe-space-navigator-controls.js"></script>
</head>
<body>
<a-scene>
<a-camera space-navigator-controls="
movementEnabled: true;
lookEnabled: true;
rollEnabled: true;
invertPitch: false;
fovEnabled: false;
fovMin: 2;
fovMax: 115;
rotationSensitivity: 0.05;
movementEasing: 3;
movementAcceleration: 700;
fovSensitivity: 0.01;
fovEasing: 3;
fovAcceleration: 5;
invertScroll: false;
" fov="55"></a-camera>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
archilogic-com