We continue where we left off in Getting Started.
Goal of this tutorial is to get you familiar with adding custom logic to your project.
We will be creating two scripts that allow counting the number of frames an object was looked at.
One script will be added to the camera and will cast rays to check if we are looking at a specific object. The other is added to an object to do the display of the frame count.
If you have the app running in the browser it will even reload the page for you with the changes sources.
Name the component
By double-clicking the file, it will be opened with the application you configured
your system to open
.js files with.
And finally, we fill the component with life. The following code sends out a ray cast into the scene every frame:
For now we are just printing the names of the objects we hit with our ray cast.
Add Component to Object
This component is not run automatically. We need to attach it to the camera!
To see the component in action, “Package” and “Open Browser”.
Ctrl + Shift + C,
you will notice the component has been initialized.
No object names are being printed, though.
this.engine.scene.rayCast() uses the
collision system, which only works with
collider components. To make sure the ray
cast hits something, we need to add more components!
Add a child to the mailbox object as shown in the following screenshot.
collision component to that new child object.
Set the radius to, e.g.,
With this setup, we can “Package” and see that the ray cast works.
Counting and Displaying
We need to keep track of the count and finally display it with a text component.
Add a “text” component to our “Collider” object and change the text to “0”.
You will notice the
msg property here. The editor will automatically generate an
input field for it, when we add the component to the “Collider” object:
Finally, replace the
// TODO comment in
counting-gaze.js with the following:
“Package” and check the browser. You will now see the final result!
With the automatic reloading, the workflow allows for very quick iterations.