b3d-loader

Loads a GLB/glTF scene file into the 3D scene. Meshes named with -ignore are discarded. Imported point/spot lights have their intensity scaled by lightIntensityScale.

Material conventions are applied automatically to all loaded meshes.

Attributes

Demo

import { b3d, b3dSun, b3dSkybox, b3dLoader, b3dReflections, label3d, slider3d } from 'tosijs-3d'
import { tosi, elements } from 'tosijs'
const { div, span } = elements

const { demo } = tosi({ demo: { time: 10 } })

const formatTime = (v) => {
  const h = Math.floor(v)
  const m = Math.round((v % 1) * 60)
  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
}

preview.append(
  b3d(
    {
      scenePanel: () => [
        label3d({ text: 'Scene' }),
        slider3d({ label: 'time of day', value: demo.time, min: 0, max: 24, step: 0.1 }),
      ],
      sceneCreated(el, BABYLON) {
        const camera = new BABYLON.ArcRotateCamera(
          'cam', -Math.PI / 2, Math.PI / 4, 20,
          new BABYLON.Vector3(0, 1, 0), el.scene
        )
        camera.lowerRadiusLimit = 3
        camera.upperRadiusLimit = 40
        camera.attachControl(el.querySelector('canvas'), true)
        el.setActiveCamera(camera)
      },
    },
    b3dSun(),
    b3dSkybox({ timeOfDay: demo.time, realtimeScale: 0 }),
    b3dLoader({ url: '/materials.glb' }),
    b3dReflections(),
  ),
  div(
    { class: 'debug-panel' },
    span({
      bind: {
        value: demo.time,
        binding: (el, v) => { el.textContent = formatTime(v) },
      },
    })
  )
)

tosi-b3d { width: 100%; height: 100%; }
.debug-panel { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 16px; padding: 8px 20px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 6px; font-size: 14px; z-index: 10; }
.debug-panel label { display: flex; align-items: center; gap: 4px; }

Usage

import { b3d, b3dLoader } from 'tosijs-3d'

document.body.append(
  b3d({},
    b3dLoader({ url: '/scene.glb' })
  )
)