Needle Engine Documentation

Basic html

The following is an example for how to use Needle Engine with vanilla javascript / without using a bundler.
See it live hereopen in new window.

How to run locally

Install vscode live-server extensionopen in new window.
Then open this index.html with the live-server and navigate to http://localhost:5500/index.html in your web browser.

TIP

Make sure to update the <needle-engine src="myScene.glb"> path to an existing glb file
or download this sample glbopen in new window and put it in the same folder as the index.html, name it myScene.glb or update the src path.

<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Made with Needle</title>

    <!-- importmap -->
    <script type="importmap">
        {
          "imports": {
            "three":  "https://unpkg.com/three/build/three.module.js",
            "three/": "https://unpkg.com/three/"
          }
        }
    </script>
    <!-- parcel require must currently defined somewhere for peerjs -->
    <script> var parcelRequire; </script>
    
    <!-- the .light version does not include dependencies like Rapier.js (so no physics) to reduce the bundle size, if your project needs physics then just change it to needle-engine.min.js -->
    <script type="module" src="https://unpkg.com/@needle-tools/engine@3.5.6-alpha/dist/needle-engine.light.min.js"></script>

    <style>
        body { margin: 0; }
        needle-engine {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            background: grey;
        }
    </style>

</head>

<body>

    <!-- load a gltf or glb here as your scene and listen to the finished event to start interacting with it -->
    <needle-engine src="myScene.glb" loadfinished="onLoaded"></needle-engine>

</body>

<script>
    function onLoaded(ctx) {
        console.log("Loading a glb file finished 😎");
        console.log("This is the scene: ", ctx.scene);
    }
</script>

</html>

View on githubopen in new window