Create a Three.js scene without the boilerplate
MIT License
This tool does all the magical incantations necessary for creating a scene with Three.js:
camera
, renderer
, and scene
instancesnpm install @depasquale/three-wizard
import Wizard from '@depasquale/three-wizard';
const wizard = new Wizard({
// Choose from `ImmersiveControls`, `OrbitControls`, and `static` (more options coming soon)
controls: 'OrbitControls',
});
// You can access these if necessary
const { scene, camera, renderer, controls } = wizard;
// Add things to the scene
// ...
Define the render loop in which things are updated each frame. (Three.js Wizard takes care of updating the controls and telling the renderer to render, so there's no need to include this boilerplate code.) Then start the animation.
const render = () => {
// Update things in the scene
// ...
};
wizard.start(render);
controls: 'ImmersiveControls' | 'OrbitControls' | 'static'
static
.initialPosition: THREE.Vector3
new THREE.Vector3(0, 1.6, 5)
.css: true | false
true
.If using ImmersiveControls, the options for these controls can be included here as well.
A full example is provided in the example
directory. To try it locally in your browser, run:
npm run example
Or try it here.