Documentation

Using Needle Engine directly from HTML

While our default template uses viteopen in new window as powerful bundler, Needle Engine can also be used directly with vanilla Javascript – without using any bundler.

A basic sample can be found hereopen in new window.
Many examples can be found on StackBlitzopen in new window.

How to run locally

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/[email protected]/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