CharacterController with @babylonjs/core

Questions
,
1

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 !!

2

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

3

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

4

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
5

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

6

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
7

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
8

This is what I meant as Solution 1 :slight_smile:

2 Likes
9

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