Using Needle Engine directly from HTML
While our default template uses vite as powerful bundler, Needle Engine can also be used directly with vanilla Javascript – without using any bundler.
A basic sample can be found here.
Many examples can be found on StackBlitz.
How to run locally
- Install the VSCode LiveServer extension.
- 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 glb 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>