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 example

Installation

npm

npm install @verseengine/three-move-controller

CDN (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);
});

Reference

API Reference

Link