Tokoku is an online grocery store company profile website. The website provide an easy access to grocery shopping with many choices of products such as vegetables, meats, drinks, fruits, and so on.
The website has CMS (Content Management System) as a back-end to manage the content of the website. The website implements MVC (Model – View – Controller) model and CSS based design (we used bootstrap for the design).
The Mall is a simple simulation of a “mini” mall. Inside the mall, there are 10 stores. Each store has different brand but they might sell identical things. The stores inside are: Topshop, Guess, Clothing Store brand B, Bookstore, Cinema XXI, Chatime, McDonald, Bonchon chicken, Mart, Pharmacy, and Guess. Player is placed inside a mall and will be shown what store he/she should go. Each time the game is reloaded, it will randomize the object that player should find.
The game is created with Three.js. As for the modelling, we use Blender. The game implements translation and rotation among axis to create player movement. We also use OrbitControls.js for zoom in/out controller. The game also uses third-person controller, and camera looks at the position of the player from top.
Here are our screenshot for the game:
Landing page. On the right hand side, player is shown the store he needs to find
Scroll mouse for the zoom out to give more clear views
This week, Niken and I have been improving many things for our project. Such as; adding the object to become the player, adding camera onto the scene and the camera is following the player. We also made the camera to look at the object position. We also have created arrays to hold the object, and did the coding to get random items from the array.
We also adding some controllers for the player, which is using the keyboard arrow. We implement the translatation along an axis and rotation with matrix (multiplying the object we want to rotate with the rotation matrix along an axis with specified angle). We also can use the mouse to rotate and zoomin/out, so the view will be more clear.
Lastly, we added the position detector. We check and compare the player’s position and each store’s position. And if the position of the player is in the position of the store we’re searching for, then the mission is complete.
Tomorrow is our final presentation. We also finished the reports and made the video demo. Wish us luck!
Landing page. The text on the left is to show where and what thing needs to be purchased. It is randomized.
We added more rooms for the mall (and will add more). Maybe, we are going to have 10 counters on our mall.
Last progress, we did not know how to load more than 1 object in the browser. But we finally knew it. Before, we also had some problems on loading textures for our object in the browser. The textures can’t be seen, it was all black. But, today we finally can show the textures on the browser after watching some tutorial video from Youtube.
5 different objects (rooms) can be loaded in the browser
This project is inspired from daily activities when someone goes to the mall and shop for certain things. The Mall project describe the behavior and activities of people when shopping in the mall. We also want to create an enjoyable and fun game for player by enabling them to explore the scene.
Music Bank is an e-commerce website focuses on selling music album from various genres. This website is also connected to Music Bank’s database using the help of PHP. We use Bootstrap as our website template and modify it using CSS, JavaScript. The website does not only provide pages for the users, but also for the Admin. Meaning that, the admin can comfortably add new product(s) to the database from the admin page.