Basic html
The following is an example for how to use Needle Engine with vanilla js (without any bundler).
<!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>
<!-- loading the needle engine js file -->
<script type="module" src="https://unpkg.com/@needle-tools/engine"></script>
<style>
body { margin: 0; }
needle-engine {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: black;
}
</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 finished", ctx);
}
</script>
</html>