Getting started

From nothing to a lit scene you can walk around, then where to go next.

Install

npm install tosijs-3d tosijs @babylonjs/core @babylonjs/gui @babylonjs/loaders @babylonjs/materials

Babylon (^9) and tosijs (^1.9.2) are peer dependencies: you install them, so your app has exactly one copy of the engine. jolt-physics is an optional peer, needed only for b3d-physics.

A first scene

No model file needed:

import { b3d, b3dSun, b3dSkybox, b3dGround, b3dBox, b3dSphere } from 'tosijs-3d'

document.body.append(
  b3d(
    b3dSun({ shadowCascading: true }),
    b3dSkybox({ timeOfDay: 10 }),
    b3dGround({ size: 24, texture: 'checker' }),
    b3dBox({ x: -1.5, y: 0.5, color: '#c8553d' }),
    b3dSphere({ x: 1.5, y: 1, diameter: 2, color: '#ffd166' })
  )
)

Give the element a size in your CSS (tosi-b3d { width: 100vw; height: 100vh; }).

That is the whole app. b3d(...) creates a <tosi-b3d> element, which owns the engine and the scene; everything nested inside it adds itself when the scene is ready and removes itself when it leaves the page. You get an orbit camera, shadows, and (on a device that supports it) an Enter VR button, without asking. The Primitives page is this scene, running.

The functions are element creators, so the same scene is also plain markup: <tosi-b3d><tosi-b3d-sun shadow-cascading></tosi-b3d-sun>...</tosi-b3d>.

Then what

You want Start at
Your own model b3d-loader loads a GLB. Mesh name suffixes (_collide, _mirror, _nocast) set behaviour: Material Conventions
Something to drive b3d-biped, b3d-car or b3d-aircraft, inside a b3d-input-focus so keyboard, gamepad, touch and VR controllers all work
A world b3d-terrain, b3d-water, b3d-skybox. Land and Sky is all of it at once
Controls that work in a headset The scenePanel hook on b3d, built from widgets3d
Things that blow up Combat
A world something else drives World Sim

Finding a capability

Search the attribute index before deciding something is not there: one line per attribute of every element, generated from source. It also ships in the package, at node_modules/tosijs-3d/static/attributes.txt.

How the pages are organised

Each section lists the elements you put in a scene. Tucked under an element are the pure models and helpers it is built from (the flight model under the aircraft, the biome chart under the terrain). You can use those directly, and they are where the tests are, but you do not need them to get started.