Integrating/Importing Three.js with Cannon.js into Needle Engine for AR Development

Hello everyone,

I’m seeking advice for a transition I’m considering for a web-based 3D project I’m working on. It’s currently developed in Three.js, and notably, it uses Cannon.js for physics simulations. My goal is to evolve this project into a web-based AR app, and I’ve been exploring the Needle Engine as a potential tool for this.

From the documentation, I understand that Needle Engine is compatible with Three.js, as every Needle object is also a Three.js object. However, my experience with Unity and Needle Engine is quite limited, and I’m looking for guidance on how to approach this transition.

My main question is: Can I directly import an existing Three.js project, which extensively uses Cannon.js for physics, into Needle Engine? How does this integration work, especially considering the physics simulations? I’m aware that Unity generally handles physics internally, so I’m curious about potential conflicts or issues that might arise from integrating Cannon.js physics into this environment.

Thank you very much for your time and assistance.

Best regards

Original Post on Discord

by user 336620800398458882

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

Hi,

you’re correct - Needle Engine uses threejs under the hood and adds a component system with some lifecycle methods to the Object3D objects so you can add components (derive from Behaviour) to any object and receive certain events. There are a few guides for scripting that explain all that: Needle Engine Scripting | Needle Engine Documentation

You can use either Unity, Blender or no Editor at all if you prefer - it depends on your project, altough we would recommend using one for the benefit of much quicker iteration (you can visually modify objects - save and see the results - as well as add or remove behaviours and assign reference or change settings without having to do it from code)

Needle Engine does internally use Rapier for physics - that doesnt mean you can not use cannon but you should be aware that if you use Needle Engine Collider or Rigibody components they would generate rapier physics objects. Rapier can be disabled tho in which case Needle Engine does not add any physical objects which would be probably the easiest and cleanest solution for you to avoid confusion! If you want to disable it from a scene exported from Unity you’d add the NeedleEngineModules component and set Physics Engine to None. Alternatively you could if you use vite as a bundler disable rapier in the config as well via our plugins: needlePlugins(command, needleConfig, { useRapier: false }),
image.png

It’s important to understand that Unity has nothing to do with Needle Engine directly once you’re running in the web. What we provide is a easy and flexible way to author and export scenes from Unity into GLB files that are then loaded in the web and that the resembles what you saw in Unity (or Blender - it’s the same thing). Needle Engine - as said above - is able to load these GLB files and re-create the components, lighting, physics, animations as setup in the editor - but the same thing can be accomplished without using Unity and nothing has to be loaded from a GLB :slightly_smiling_face:

I think it would be good to know your current project setup and structure to further advice and what you goals are - do you want to use e.g. Unity or Blender or would you just want to use certain features that Needle Engine has in your project? Or is it something else :slightly_smiling_face: what you ask for is certainly possible (using an existing threejs project with cannonjs in Needle Engine)