CharacterController with @babylonjs/core

Hello !
I am back to BabylonJS after a year or two out, the new version looks promising :smiley:

I just setup my project with a 3d model and I want to use the Character Controller library from @satguru which is doing exactly what I want to do.

However, it has a dependency “babylonjs” and my project is with React, I use import { ... } from "@babylonjs/core"

I tried to import “babylonjs” as well, even if having both dependencies is not a good option, but I end up with some type issues, and I think this library was not made to be used with these es6 modules…

Is it a workaround to get all this working ?
Thank you in advance !!

Do you want to use the source .ts file for Character Controller or you may use .js file without any imports?

You mean importing files by hand in my project ?
I am afraid I did not understand you very well :sweat_smile:

I do not have any requirement by the way, I am open to any suggestion

Solution 1. Change import in CharacterController.ts from "babylonjs" to "@babylonjs/core".
Solution 2. Use .js file from the /dist folder - BabylonJS-CharacterController/dist/CharacterController.js at master · ssatguru/BabylonJS-CharacterController · GitHub

1 Like

I tried solution 1, but now I encounter another problem. I am using React with Remix.run, which is a full stack web framework, and it needs to load BabylonJS on the client only.

I lazy-load it with
const CharacterController = React.lazy(() =>
import(‘babylonjs-charactercontroller’).then((module) => ({ default: module.CharacterController }))
); but get another error : “Target signature provides too few arguments”

Regarding solution 2, I do not really know how to apply it.
Thanks for your help anyway

I finally managed to get it work by copying/paste the file BabylonJS-CharacterController/src/CharacterController.ts at master · ssatguru/BabylonJS-CharacterController · GitHub in my project and changing the import in the first line from babylonjs to @babylonjs/core.

Thanks @labris for taking me in the right direction

1 Like

Both solutions work for even with React (but without React.lazy), but, of course, it also depends on environment settings.
Regarding the solution 2 is goes as something like

import * as CC from "https://raw.githubusercontent.com/ssatguru/BabylonJS-CharacterController/master/dist/CharacterController.js"

Also you’ll need to add ts declaration - BabylonJS-CharacterController/dist/CharacterController.d.ts at master · ssatguru/BabylonJS-CharacterController · GitHub

I don’t know much about Remix.run but I think the solution 1 is more flexible since you may want to edit CharacterController.ts file later, so I hope you’ll be able to make it work. Actually one imports it with the same way as babylon.js.

1 Like

This is what I meant as Solution 1 :slight_smile:

2 Likes

FYI… My Babylon Toolkit has built - in support for new Havok Physics engine with all the Unity Colliders… Including the UNITY.CharacterController Pro Class.

Unity Interactive Content - Character Controller Demo Playground

2 Likes