Getting input from a different element than the rendering canvas

Questions
1

I’m trying to integrate babylon into a web app that uses multiple canvases for rendering and if possible I would like to set the engine to listen for input on a containing div element. I’ve tried following the guide here but I’m getting an error saying that engine.registerView is not a function. Additionally, engine.inputElement doesn’t seem to be defined or have any effect when set. No matter what I try, I can’t seem to get any listeners to be applied to anything other than the rendering canvas.

Is there another way to accomplish what I’m trying to do, or am I encountering a bug? I’m using version 5.23.0.

import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
import { Color4 } from '@babylonjs/core/Maths/math.color';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder';
import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera';
import { PointerDragBehavior } from '@babylonjs/core/Behaviors/Meshes/pointerDragBehavior';
import '@babylonjs/core/Materials/standardMaterial'; // side-effect

const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 600;
const engine = new Engine(canvas);
engine.registerView(document.getElementById('finalcanvas'));
engine.inputElement = document.querySelector('.canvas-container');

const scene = new Scene(engine);
scene.clearColor = new Color4(0, 0, 0, 0);

const camera = new UniversalCamera('camera1', new Vector3(0, 0, -10), scene);
camera.mode = UniversalCamera.ORTHOGRAPHIC_CAMERA;
camera.orthoLeft = -600;
camera.orthoTop = -600;
camera.orthoBottom = 600;
camera.orthoRight = 600;
camera.setTarget(Vector3.Zero());

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

const sphere = CreateSphere('sphere1', { diameter: 140 }, scene);
sphere.position = new Vector3(140, 140, 0);

const ptrBehavior = new PointerDragBehavior({ dragPlaneNormal: new Vector3(0, 0, 1) });
ptrBehavior.attach(sphere);

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

function moveCamera(offsets, scale) {
	[camera.orthoLeft, camera.orthoTop] = offsets;
	camera.orthoRight = (canvas.width / scale) + offsets[0];
	camera.orthoBottom = (canvas.height / scale) + offsets[1];
}

function resizeCanvas(width, height, scale, offsets) {
	canvas.width = width;
	canvas.height = height;
	moveCamera(offsets, scale);
}

export {
	canvas,
	resizeCanvas,
	moveCamera,
};
1 Like
2

cc @PolygonalSun

3

It looks like I might have been missing a side-effect from an import somewhere. It started working as expected once I did import { Engine } from '@babylonjs/core'.

3 Likes