@verseengine/three-move-controller
v1.0.2
Published
Movement and rotation by keyboard and mouse
Downloads
6
Readme
three-move-controller
Movement and rotation by keyboard and mouse
Features
- Move with WASD and arrow keys
- Rotate by mouse dragging
- Individually set targets for vertical and horizontal rotation
- Enable movement and rotation individually
- Limit control of vertical rotation
- Vertical rotation On/Off
Example
npm run exampleInstallation
npm
npm install @verseengine/three-move-controllerCDN (ES Mobules)
<script
async
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"
></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three-move-controller": "https://cdn.jsdelivr.net/npm/@verseengine/[email protected]/dist/esm/index.js"
}
}
</script>Usage
import * as THREE from "three";
import { MoveController } from "three-move-controller";
const person:Object3D = ...;
const head:Object3D = ...;
const camera:THREE.PerspectiveCamera = ...;
person.add(head);
head.add(camera);
head.position.set(0.0, 1.7, 0.0);
const moveController = new MoveController(person, head, head, {
minVerticalRotation: 0.65,
maxVerticalRotation: 2.2,
});
moveController.rotationEnabled = true;
moveController.moveEnabled = true;
moveController.verticalRotationEnabled = true;
...
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
const dt = clock.getDelta();
moveController.tick(dt);
});