Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucamueller1/three-creative-controls
Three.js noclip camera controls that feel similar to minecraft creative mode
https://github.com/lucamueller1/three-creative-controls
controls minecraft noclip threejs threejs-controls webgl
Last synced: 13 days ago
JSON representation
Three.js noclip camera controls that feel similar to minecraft creative mode
- Host: GitHub
- URL: https://github.com/lucamueller1/three-creative-controls
- Owner: LucaMueller1
- License: mit
- Created: 2021-07-01T22:04:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-03T20:27:30.000Z (over 3 years ago)
- Last Synced: 2024-11-02T19:03:00.074Z (13 days ago)
- Topics: controls, minecraft, noclip, threejs, threejs-controls, webgl
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Three Creative Controls
Three.js noclip camera controls that feel similar to minecraft creative mode. Based on [PointerLockControls](https://threejs.org/docs/#examples/en/controls/PointerLockControls).
Install using npm:
```shell
npm i three-creative-controls
```
## Usage
Import the module
```js
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`
```js
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.
```js
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.
```html
Click to play
Move: WASD
Fly up: SPACE
Fly down: SHIFT
```
Styling for the sample blocker and menu:
```CSS
#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:
```html
```
Styling of the crosshair vector graphic:
```css
#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
```shell
npm i
npm start
```
The example is available under localhost:3000
