V0.2.7
Free & Open Source ThreeJS Addons to speed up productivity
Attributes
Includes Deno configuration
Repository
Current version released
10 months ago
Dependencies
other
npm:@dimforge/rapier3dnpm:/three@0.160.0/examples/jsm/controls/OrbitControlsnpm:/three@0.160.0/examples/jsm/controls/OrbitControls.tsnpm:/three@0.160.0/examples/jsm/controls/PointerLockControlsnpm:/three@0.160.0/examples/jsm/controls/PointerLockControls.tsnpm:/three@0.160.0/src/cameras/Cameranpm:/three@0.160.0/src/cameras/PerspectiveCameranpm:/three@0.160.0/src/cameras/PerspectiveCamera.tsnpm:/three@0.160.0/src/math/MathUtils.tsnpm:/three@0.160.0/src/math/Quaternion.tsnpm:/three@0.160.0/src/math/Vector3npm:/three@0.160.0/src/math/Vector3.tsnpm:/three@0.160.0/src/scenes/Scene.ts
ThreeJS-Addons
Introduction
This project is a collection of ThreeJS Addons to speedup productivity when working with ThreeJS projects. The Project comprises of the following:
- Camera Controller: Easily switch between different cameras and their respective controls in your scene.
- Rapier Collider Controller: Enable collision detection, allowing objects to stop on collision.
- Translation Controller: Move Cameras, Objects, Colliders etc. in your scene.
Installation
You can get the package via npm:
npm i --save @threejs-addons/threejs-addons
Usage
To begin using the addons, simply import them into your project
import {
CameraController,
RapierColliderController,
TranslationController,
} from '@threejs-addons/threejs-addons';
import { utils } from '@threejs-addons/threejs-addons';
/** get default options for your class instances */
const { DEFAULT_OPTIONS } = utils;
/** instantiate the camera controller class i.e CCC */
const CCC = new CameraController({ scene: scene }); //controller adds cameras to your scene
/** assuming your application requires collison detection for the controllers **/
/** we have implemented a Rapier collider controller class or simply RCC */
const offset = 0.5;
const RCC = new RapierColliderController({ world: world as RAPIER.World, offset, options: DEFAULT_OPTIONS });
/** instantiate the translation controller class or simply TCC **/
const TCC = new TranslationController({ options: DEFAULT_OPTIONS });
/** somewhere in your code, you use the TCC to handle all translations */
TCC.setCCC(CCC);
TCC.set(RCC);
/** you may want to set up event listerners some where in your code*/
window.addEventListener('keydown', (e) => {
if(e.key === 'w'){
RCC.setTranslateZDirection(true, 1)
// TCC.setTranslateZDirection(true, 1)
}
if(e.key === 's'){
RCC.setTranslateZDirection(true, -1)
// TCC.setTranslateZDirection(true, -1)
}
if(e.key === 'a'){
RCC.setTranslateXDirection(true, 1);
// TCC.setTranslateXDirection(true, 1)
}
if(e.key === 'd'){
RCC.setTranslateXDirection(true, -1);
// TCC.setTranslateXDirection(true, -1)
}
if(e.key === 'ArrowLeft'){
CCC.switchControlTypeNext(null); //switch controls
}
if(e.key === 'ArrowRight'){
CCC.switchControlTypeNext(null); //switch controls
}
if(e.key === 'c'){
CCC.switchControllerNext(null); //switch cameras
}
})
window.addEventListener('keyup', (e) => {
if(e.key === 'w'){
RCC.setTranslateZDirection(false, null)
// TCC.setTranslateZDirection(false, null)
}
if(e.key === 's'){
RCC.setTranslateZDirection(false, null)
// TCC.setTranslateZDirection(false, null)
}
if(e.key === 'a'){
RCC.setTranslateXDirection(false, null)
// TCC.setTranslateXDirection(false, null)
}
if(e.key === 'd'){
RCC.setTranslateXDirection(false, null)
// TCC.setTranslateXDirection(false, null)
}
})
function animate(){
/** asuming you have some animate loop in your code*/
TCC.update(delta, true);
}
API Documentation
The controllers are documented in the following links:
- Camera Controller Class(CCC) .
- Rapier Collider Controller Class(RCC) .
- Translation Controller Class(TCC) .
Contributing
@todo
License
This project is licensed under the MIT License.