/three-creative-controls

Three.js noclip camera controls that feel similar to minecraft creative mode

Primary LanguageJavaScriptMIT LicenseMIT

Three Creative Controls

Three.js noclip camera controls that feel similar to minecraft creative mode. Based on PointerLockControls.

Install using npm:

npm i three-creative-controls

Usage

Import the module

import * as THREE from "three";
import { CreativeControls } from "three-creative-controls"

Reference a blocker and menu screen from your html in your code. Create a CreativeControls object and provide your scene camera, renderer and both the menu and blocker element. Define the movement speed for the controls as a Vector3 object. Default is 200, 200, 200

const blocker = document.getElementById('blocker');
const menu = document.getElementById('menu');

const creativeControls = CreativeControls.Controls(camera, renderer.domElement, menu, blocker);
const creativeControlsSpeed = new Vector3(200, 200, 200);

Run the CreativeControls update function to keep your controls object updated. Pass your controls object and the desired speed vector as parameters.

const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  
  CreativeControls.update(creativeControls, creativeControlsSpeed);
};

Blocker and Menu element

The Blocker element is used as an overlay for your current scene to make the menu more visible. The Menu could feature whatever you want. The sample menu down below just displays the controls.

<div id="blocker">
  <div id="menu">
    <p style="font-size: 36px; color: white">
      Click to play
    </p>
    <p style="font-size: 24px; color: white">
      Move: WASD<br/>
      Fly up: SPACE<br/>
      Fly down: SHIFT
    </p>
  </div>
</div>

Styling for the sample blocker and menu:

#blocker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

#menu {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

Crosshair

Feel free to add a crosshair to your scene if necessary. The easiest approach is the following:

<body>
  <div id="crosshair">
    <img id="crosshairImage" src="./images/crosshair.svg"/>
  </div>
</body>

Styling of the crosshair vector graphic:

#crosshair {
  position: fixed;
  pointer-events: none;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
}

#crosshairImage {
  width: 1.5%;
  opacity: 0.8;
  object-fit: cover;
}

Refer to the demo if you have any questions.

Run the Demo

Clone the repository and run

npm i
npm start

The example is available under localhost:3000

image