BJS Character Controller V2

Demos and projects
, ,
21

I was wondering, could this become an NPC controller as well?

1 Like
22

@Joe_Kerr You’re aiming hard, sir!
Noted in the notebook

1 Like
23

@DRLeria
Hello ! I found this and I love it !
Is it possible to use it as a package ? I see you import it directly in your HTML file, but I work with Typescript and I do not have the same dependencies than yours.

My goal would be to use it like any other package in my project.
Or a solution could be to deliver 1 file “character-controller” with all the dependencies inside ?
Maybe you have a solution to this problem.

Thank you in advance for your response :wink:

24

Hi @Boz

It´s really easy to implement in your project.
You can use just directly character-controller.js

The core folder is primarily for using the builder and is only for generating your custom character controller. The UI code only includes the basic interface; you can omit it since it’s not required.

So, with just character-controller.js, you should have your character working.

Also if you use Builder to customize your character-controller you can download it using export functions and use it in your project.

Check the basic implementation in examples folder

// ═══════════════════════════════════════════════════════════

// CHARACTER INITIALIZATION HELPER

// ═══════════════════════════════════════════════════════════

async function loadCharacter(scene, shadow, camera, usePhysics) {

return setupCharacter(scene, camera, usePhysics, {

shadow,

assetsPath: 'assets/',

// Integration Mode options:

// Option A: Pre-merged GLB (Embedded animations, standard)

// filename: 'character_animated_1.glb'

// Option B: Runtime Client Retargeting (Separate mesh and animation pack)

filename: 'character_animated_1.glb',

animationsFilename: 'animations-basic.glb',

});

}

1 Like
25

Thank you, but I am using Typescript, and I have some dependencies issues.
If I just add your file in my project , with import "./character-controller.js", I have : BABYLON is not defined.
If I import Babylon on top of the character-controller.js file, with import * as BABYLON from "babylonjs", I have : r.addPendingData is not a function (in the ImportAsync function)

It is not a problem with your script, but with the way it is packed. I use Typescript and ES6 imports, and it seems not to be compatible with your behavior (importing with script tag in the HTML file).
I will look for any solution, tell me if you have an idea :wink:

1 Like
26

Hi @Boz,

You are right, the current file is not a real ESM package yet. It was mainly built for the classic Babylon.js script-tag workflow, where BABYLON is available globally.

I’ll review how to provide a proper ESM-compatible version so it can be used cleanly in TypeScript projects with imports like a normal package.

Thanks for pointing this out!

2 Likes
27

Hi @Boz,

Fixed it — added an ESM/TypeScript entry: js/character-controller.module.js. No build step needed.

Of course Install:

npm i @babylonjs/core @babylonjs/loaders
npm i @babylonjs/havok   # only if you use physics

Use:

import { setupCharacter, initPhysics } from "./character-controller.module.js";

const handle = await setupCharacter(scene, camera, true, {
  assetsPath: "assets/",
  filename: "character_animated_1.glb",
});

use js/character-controller.js

and js/character-controller.module.js

The wrapper imports the same Babylon build, registers the glTF loader (that’s what fixed your addPendingData error), and exposes the API as normal ESM exports. Just make sure you use one Babylon build everywhere — don’t mix babylonjs and @babylonjs/core.

Let me know if it works on your side :+1:

2 Likes