Bundling
By default, Needle Engine gets bundled into a web app on deployment. This ensures smaller files, tree-shaking (similar to code stripping in Unity) and optimizes load times. Instead of downloading numerous small scripts and components, only one or a few are downloaded that contain the minimal code needed.
Vite (our default bundler) has a good explanation why web apps should be bundled: Why Bundle for Production
Vue, React, Mustache, etc.
Needle Engine is unoponiated about the choice of framework. The default template only uses vite as bundler. Adding vue to that is easy (see the vite docs), we also provide an (experimental) react-three-fiber template and there should be nothing stopping your from using simpler or more complex frameworks.
Here's some example tech stacks that are possible with Needle Engine:
just vite + HTML
Our default template does thisvite + vue
This is what the Needle Tools website uses!vite + react
There's an experimental template for this that you can pick when generating a project!react-three-fiber wrapped around a
<NeedleEngine>
tag
We've used this for some experimentstsc
to compile TypeScript, no bundling required
No example yeta pre-built Needle Engine and direct JavaScript
Code example here
In short: we're currently providing a minimal vite template, but you can extend it or switch to other frameworks –
let us know what and how you build, and how we can improve the experience!
Creating custom web project templates
WARNING
This section is Under Construction. 🏗️
You can create and share your own web project templates to use other bundlers, build systems, or none at all.
Create a new Template
- Select
Create/Needle Engine/Project Template
to add a ProjectTemplate into the folder you want to use as a template - Done! It's that simple.
The dependencies come from unity when there is a NpmDef in the project (so when your project uses local references).
You could also publish your packages to npm and reference them via version number.
Accessing components from regular javascript
Code that you expose can be accessed from JavaScript after bundling. This allows to build viewers and other applications where there's a split between data known at edit time and data only known at runtime (e.g. dynamically loaded files, user generated content).
For accessing components from regular javascript outside of the engine please refer to the interop with regular javascript section