Raycaster Interaction

Raycaster-based interactions for detecting object intersections.

< Back to templates

This template showcases how to use raycasters in Mattercraft to detect when the raycaster intersects with objects in the scene.

The scene features a spinning raycaster at the center, surrounded by four boxes. When the raycaster intersects with a box, the box's material color changes to red via Animation Action Behaviors inside the Box component.

A cube is also attached to the raycaster. Its color changes when the raycaster intersects with the boxes, using Animation Action Behaviors directly on the raycaster in the main scene component.

Explore the Box component and main scene to see how the raycaster and behaviors are set up for this interactive experience.

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