For this project, Jamie and I co-created this Tron Matrix that consists of a set of controllable flying discs and a space-like environment. This project was inspired by the movie Tron: Legacy. In the movie, the element disc can not only be used as an identity card but also as a weapon that can be thrown by users and has the movement like a dart. In our project, we will mimic the interaction of throwing the disc and the bouncing movement of the disc inside a transparent box within a galaxy-like environment.
Generating the Disc
At the beginning, I took charge of creating the appearance of the disc. Since we were asked to use three.js, by researching online, I found that TorusGeometry and RingGeometry can simulate shapes that are similar to the disc in the movie. For the material, I chose MeshBasicMaterial and MeshStandardMaterial for the mesh. The MeshStandardMaterial provides a parameter to control the metalness that makes it more like a metal disc. I also used OOP and a THREE.Group() function to combine all the meshes into one for better control in the future. After exploring around all the parameters of the geometry and material, I managed to create this disc. It looks like this:
Creating the Sphere
While I was creating the disc, Jamie handled the creation of the space that contained the interaction and the movement of the disc. At first, she used OctahedronGeometry to generate a big ball outside of the disc. We planned to detect every individual points on the ball surface and calculate the reflection movement of the disc, but somehow we failed. So we changed to create a cube for the disc’s movement.
Creating the Cube & Controlling Interaction
For the testing phase, we used BoxGeometry and MeshNormalMaterial to generate a trial version of the cube, combined the code of the disc with the cube and started to code for the interface and user interaction. By adding the disc onto the camera, we managed to make the disc stay on the 2D surface of the camera while using GUI to control the corresponding coordinate of the disc on the camera interface. We also coded another interaction that allows users to press the SPACE bar to shoot out new discs that can fly around within the cube.
Setting the Target Position
For this part, we researched a bit online and found a similar project that we might use as our reference for targeting the mouse position in the 3D space.
We wanted to apply the point cloud onto each face of the cube or in front of the camera so that we can choose the points as the target point of our shooting disc. But we ran into some difficulties to figure out how to change the code. So we changed the plan and tried to use the same method as the attached disc to add another object attached to camera so that we can utilize the direction from the disc to the object to shoot the disc. Unfortunately, we failed again.
So we turned to Professor Moon for help. This time, we made some progress. Professor taught us to use the function applyQuaternion() to get the angle between the perspective of camera and the attached disc. This approach allowed us to discard the previous object (which is the sphere shown on the picture above) and only use the perspective of the camera to decide the shooting direction of the disc. Finally, it turned out that this approach is feasible for our project.
Disc Movement
On the basis of the original disc, I also used the TorusGeometry and added two rotating elements at the outer circle of the disc to make it look like it’s rotating.
I also created the bouncing movement of the disc when the disc hit the faces of the big cube. Basically, I used the if statement inside the Disc Class to set a limit for the disc’s movement and changed the direction of its velocity when it reached the limit.
Visualization
To improve the visualization of our project, we added three features into the code. First, we coded to change the color of the cube every time when a disc hits the wall. We applied random color for this feature.
Second, in the outer environment, we randomly generated a bunch of particles with a flying movement to create a galaxy-like background.
Third, to give the user a better perspective of observing the movement of the discs and the general visual effect, we added another camera perspective for users to observe outside the cube. The final outcome looks like this:
Further Improvement
For future development, we tend to turn the outer cube into a sphere as our initial idea. We need to figure out how to calculate the reflection angle of the disc and also the tilting angle of the disc itself to align with its flying direction. For visualization, we want to create more cool visual effects when the disc hits the wall. For example, we can create ripples on the cube’s wall right at the position where the disc hits and they will be gradually fading away.
Reference