Nanometer Process Machine

    three-musketeers

    0.11.0 • Public • Published

    three musketeers

    Build Status npm

    "All for one. One for all."

    This module serves as an intuitive tool to introspect, debug and test any THREE.js application.

    GitHubDocumentationExamplesDemo

    Demo

    IMAGE ALT TEXT HERE

    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
    import * as THREE from 'three';
    import musketeers from 'three-musketeers';
     
    init();
     
    function init() {
      const { innerWidth, innerHeight } = window;
      const scene = new THREE.Scene();
     
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(innerWidth, innerHeight);
      document.body.appendChild(renderer.domElement);
     
      const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 10);
      camera.position.z = 1;
      scene.add(camera);
     
      const mesh = new THREE.Mesh(
        new THREE.BoxGeometry(0.2, 0.2, 0.2),
        new THREE.MeshBasicMaterial({ color: 0xFF0000 })
      );
      // assign a unique name to our mesh to be able to query it later
      mesh.name = 'CUBE_1';
      scene.add(mesh);
     
      renderer.render(scene, camera);
     
      // attach $$$ to the window for browser debugging
      window.$$$ = musketeers({ renderer, scene, camera });
    }

    Now, you can inspect the scene through the window object:

    // javascript console in the browser
     
    $$$
    .debug() // enable visual debug mode
    .isValid(); // true
    $$$
    .find('Cube_1') // the unique identifier we assigned to our mesh
    .exists(); // true
    $$$
    .findAll((node) => node.geometry.type === 'BoxGeometry') // returns an array of items of this type
    $$$
    .find('Cube_1')
    .click(); // locates the item in the 3D scene and clicks the item
    window.addEventListener('click', (event) => {
      // find all intersected items on 'click'
      const intersectedItems = $$$.pickFromEvent(event);
      console.log(intersectedItems); // useful for debugging
    });

    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 QuestionsThree.js ForumThree.js GitterThree.js Slack

    Install

    npm i three-musketeers

    DownloadsWeekly Downloads

    18

    Version

    0.11.0

    License

    MIT

    Unpacked Size

    1.59 MB

    Total Files

    204

    Last publish

    Collaborators

    • farhadg