Model look at demo

Model looks at a customisable position relative to the center of the model.

Set modelLookAt attribute

Look at the camera (default)

scene.setAttributes({
	modelLookAt: 'camera'
});

Look at the coordinates provided

scene.setAttributes({
	modelLookAt: {
		 screenPosition: { x: 200, y: 200 }
	}
});

Look at a target

document.getElementById('my-button')
	.addEventListener('click', event => {
		scene.setAttributes({
			modelLookAt: {
				screenPosition: { x: event.clientX, y: event.clientY },
			},
		});
	});

Update the property dynamically

Follow the cursor

function mousemove(event) {
	scene.setAttributes({
		modelLookAt: {
			screenPosition: { x: event.pageX, y: event.pageY },
			depth: 0.4,
		}
	});
}

document.addEventListener('mousemove', mousemove);
0.4
©2023 Speech Graphics, Ltd.