I made a pizza making game where the user is able to make a pizza by adding toppings such as sauce, cheese, pepperoni, green peppers, mushrooms, and black olives. The controls are simple, click on a plate of toppings on the right side to add it to the pizza. There is also a trash can at the left to clear all toppings, the flaming oven will burn the pizza, and the blue button will restore the pizza to its regular state. I also disabled wasd-controls because there is no real need for the user to walk around in this scene, and walking around would require more accomodations to be made for mobile use. When the user moves their mouse over an object that is interactive, the object increases in size and sound plays on click. The only text label I have in the scene is "TRASH", because that is an absolute action that will remove everything. The controls are consistent for both desktop and mobile.
It was challenging to think of what to do for "A-Frame component that allows for selection, manipulation, and release (e.g. picking up and rotating)," because unless I use some other A-Frame libraries it is challenging to "pick up" an object in VR. Also, picking up an object using mobile would also need different controls. At first I tried to do a "pick up" event where the pizza object would follow the mouse cursor. I was able to get the world position values for the cursor, but this refers to its position in 3D space rather than the position of the cursor on screen. After doing more research on the topic, I found out that THREE.js had a function to calculate local position from world position, but to convert the object's 3D position to the 2D space that the mouse cursor moves across on the screen would require matrices transformations... I also had some issues with determining the height at which to create toppings on top of. I decided to make all 3D objects using primitives in A-Frame, which became a challenge in being creative on what toppings I could include (i.e. mushrooms made of a cylinder and a nested box primitive).
At the start of the project, I knew I wanted to create a room because I didn't like the look of empty space in the horizon and due to my pizza theme, it would be more fitting to have the setting be an enclosed kitchen. I placed the camera entity inside a cube made of planes facing inwards with images. I had to add the sound for deleting a topping to one of the ceiling lights, because there was an issue with "sound not disconnected properly" if sound is trying to play while the element is being removed. The ceiling is also playing the ambient background music. To overcome the issue with the y-position of the toppings, I added a global counter variable (window.cheeseCount) to count the number of stacks of cheese that the toppings would need to be on top of (pass into the functions for creating toppings). The toppings can overlap each other, as that is how they are in real life. I had to set a limit to the number of cheese stacks a user could add because otherwise it will become too tall to click the oven.