Trigger Interactions

Trigger-based interactive 3D scenes with collision detection and state changes.

< Back to templates

This template showcases how to use triggers in a basic 3D scene.

The scene contains two cubes, each with a Collider component child. One of the Colliders has its isTrigger property set to true, making it a trigger. A timeline animation moves one cube into the other, causing a collision.

When the cubes collide, a state is activated in the Animations panel, changing the color of both cubes to indicate that the trigger event has fired. Once the collision ends and the cube exits the trigger, their colors are restored to the original state.

This template is a great starting point for understanding how triggers work and how you can use them to create interactive experiences in your 3D scenes.

This project includes a default splash page - a 'launch' screen shown to the user when they first land on your page. It's important for both technical and user experience related reasons. You can customize it in the index.html file.

Rendering Engine

three.js

Supported Browsers

Google Chrome
Microsoft Edge
Safari on iOS and MacOS

Scripting Language

TypeScript