I don't see showBoundingBox. Why can this happen?

Questions
1

I’ve copied a code from here: https://playground.babylonjs.com/#4F33I3 and convert it to ES6, simply removing all the “BABYLON.” prefix. When I run this code I don’t see any showBoundingBox. Why can this happen? What should I check?

Also I’ve added:

engine.runRenderLoop( () => { scene.render(); } );

Babylon 7.42.0. No errors in the console.

Full code:

import "@babylonjs/core/Materials/standardMaterial";

import { Engine } from "@babylonjs/core/Engines/engine";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder";
import { CreateSphere } from "@babylonjs/core/Meshes/Builders/sphereBuilder";
import { Scene } from "@babylonjs/core/scene";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";

function create_scene(): [ Scene, Engine, HTMLCanvasElement ]
{
	const canvas = document.getElementById( "render_canvas" ) as HTMLCanvasElement;
	const engine = new Engine( canvas );
	const scene = new Scene( engine );
	return [ scene, engine, canvas ];
}

const [ scene, engine, canvas ] = create_scene();

const camera = new ArcRotateCamera( "camera", Math.PI / 2, Math.PI / 10, 3, Vector3.Zero(), scene );
camera.attachControl( canvas, true );

const light = new HemisphericLight( "light1", new Vector3( 0, 1, 0 ), scene );
light.intensity = 0.7;

const sphere = CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
sphere.showBoundingBox = true;
sphere.position.y = 1;
const ground = CreateGround("ground", {width: 6, height: 6}, scene);

engine.runRenderLoop( () => { scene.render(); } );
2

Also tried this code. And again I don’t see any bounding boxes. Maybe I missed some helpful helper import?

const sphere = CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
const ground = CreateGround("ground", {width: 6, height: 6}, scene);

const parent = new Mesh("parent", scene);

sphere.setParent(parent);
ground.setParent(parent);

let sphereMin = sphere.getBoundingInfo().minimum;
let sphereMax = sphere.getBoundingInfo().maximum;

let groundMin = ground.getBoundingInfo().minimum;
let groundMax = ground.getBoundingInfo().maximum;

let newMin = Vector3.Minimize(sphereMin, groundMin);
let newMax = Vector3.Maximize(sphereMax, groundMax);

parent.setBoundingInfo(new BoundingInfo(newMin, newMax));

parent.showBoundingBox = true;
3

You would need to import "@babylonjs/core/Rendering/boundingBoxRenderer" to ensure the correct side effects are running and the code will be there.

More of those are listed there: Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

2 Likes
4

Wow that worked! Thanks a lot!
Another thanks for pointing me to that ES6-article again. I’ve read it already but I absolutelly forgot about those things. That so helpful for me. Many thanks!

1 Like