three-creative-controls
v1.0.1
Published
Three.js noclip camera controls that feel similar to minecraft creative mode
Downloads
11
Maintainers
reignjsReadme
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-controlsUsage
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 startThe example is available under localhost:3000
