three musketeers
"All for one. One for all."
This module serves as an intuitive tool to introspect, debug and test any THREE.js application.
GitHub — Documentation — Examples — Demo
Demo
Usage
Download the minified library and include it in your HTML, or install and import it as a npm module.
$ npm i three-musketeers
The code below creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL
renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.
Lastly, we simply pass the necessary resources to the musketeers instance and attach it to our window
via the alias $$$
for experimentation:
// sample application;; ; { const innerWidth innerHeight = window; const scene = ; const renderer = antialias: true ; renderer; documentbody; const camera = 70 innerWidth / innerHeight 001 10; camerapositionz = 1; scene; const mesh = 02 02 02 color: 0xFF0000 ; // assign a unique name to our mesh to be able to query it later meshname = 'CUBE_1'; scene; renderer; // attach $$$ to the window for browser debugging window$$$ = ;}
Now, you can inspect the scene through the window
object:
// javascript console in the browser $$$ // enable visual debug mode; // true
$$$ // the unique identifier we assigned to our mesh; // true
$$$ // returns an array of items of this type
$$$; // locates the item in the 3D scene and clicks the item
window;
Check out the documentation for more details. You can also check out the example testing a 3D application with selenium.
# running and testing the example 3d application $ npm run selenium$ npm run start$ npm run test:e2e
Contribute
I welcome contributors. Please contribute if you have ideas to improve this library. Please use GitHub's pull request and issues features. You can also help implement upcoming features from the TODO page. Feel free to reach out if you'd like more context or info for implementation details.
Here are a few scripts to help you get started:
NPM Commands | Description |
---|---|
start |
Runs the examples for development |
test |
Runs unit tests for the module |
build |
Builds the module |
docs |
Updates the documentation |
components |
Updates the component entry points |
selenium |
Runs selenium |
test:e2e |
Runs e2e automated testing for the examples as an example |
Other Resources
Three.js Questions — Three.js Forum — Three.js Gitter — Three.js Slack