Have ideas to improve npm?Join in the discussion! »

    threeify
    TypeScript icon, indicating that this package has built-in type declarations

    1.76.0 • Public • Published

    threeify

    A Typescript library loosely based on three.js

    npm latest version npm next version

    threeify is a Typescript 3D library loosely based on three.js.

    Feature overview:

    • Modern: Typescript, Tree Shakable, Small Build Files
    • Rendering: WebGL 1, WebGL 2 (coming soon) and WebGPU (coming soon)
    • Materials: Physically based materials
    • Post Effects: DOF (coming soon), Motion Blur ((coming soon)), SOA (coming soon), TRAA (coming soon)
    • Animation: Clips (coming soon), Mixer (coming soon)
    • Assets: glTF (coming soon), Draco (coming soon) and Basis (coming soon)
    • XR: Augmented Reality and Virtual Reality via WebXR (coming soon)
    • Documented (TSDocs) and Tested (Jest)

    Commitizen friendly

    Warning

    In Development, Not Yet Ready for Use of Any Kind

    This library is currently in alpha and in midst of significant development. It may not even compile properly. You have been warned.

    Install and Import

    Threeify and its modules are published on npm with full typing support. To install, use:

    npm install threeify --save

    Or

    yarn add threeify

    This will allow you to import Threeify entirely using:

    import * as THREEIFY from "threeify"; // NOT YET SUPPORTED

    or individual classes using:

    import { RenderContext, Vector3 } from "threeify";

    Usage

    This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer context 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.

    import { box } from "@threeify/geometry/primitives/Box";
    import { MaterialOutputs } from "@threeify/materials/MaterialOutputs";
    import { PhysicalMaterial } from "@threeify/materials/PhysicalMaterial";
    import { PerspectiveCamera } from "@threeify/nodes/cameras/PerspectiveCamera";
    import { Mesh } from "@threeify/nodes/Mesh";
    import { Node } from "@threeify/nodes/Node";
    import { RenderingContext } from "@threeify/renderers/webgl2";
     
    const camera = new PerspectiveCamera(70, 0.01, 10);
    camera.position.x = 1;
     
    const geometry = box(0.2, 0.2, 0.2);
    const material = new PhysicalMaterial();
    material.outputs = MaterialOutputs.Normal;
     
    const mesh = new Mesh(geometry, material);
     
    const scene = new Node();
    scene.children.add(mesh);
     
    const context = new RenderingContext();
    const canvasFramebuffer = context.canvasFramebuffer;
    document.body.appendChild(canvasFramebuffer.canvas);
     
    function animate(): void {
      requestAnimationFrame(animate);
     
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
      mesh.dirty();
     
      canvasFramebuffer.render(scene, camera, true);
    }
     
    animate();

    Development

    Local

    To run:

    1. Check out the git repository
    2. Install node.js & npm as appropriate for your platform.
    3. Run npm install to install all the required node modules from package.json
    yarn
    
    1. To run the automatic typescript builder and dev server go:
    yarn dev
    

    Then open a web server to the address displayed in the console. Usually this will be http://localhost:8000.

    Docker Compose

    If you have docker and docker-compose available do:

    docker-compose up -d
    

    Theia-IDE

    threeify supports the theia-ide so you can start coding immediately. theia-ide is available at http://localhost:3000. Perform step 3 and 4 in the theia-ide terminal.

    Contributors

    This project exists thanks to all the people who contribute.

    License

    ISC

    Install

    npm i threeify

    DownloadsWeekly Downloads

    0

    Version

    1.76.0

    License

    ISC

    Unpacked Size

    5.32 MB

    Total Files

    1381

    Homepage

    threeify.org

    Last publish

    Collaborators

    • avatar