Integrating Interactive 3D Models into Website

In this project, I created a 3d animated model of carousel in Maya, incorporated it into the website, and made it interactive using Three.js from scratch.

Client

Class Project

Type

#3D Model #Interactive #Three.js

Team of

1

Duration

2 Months

Role

3D Modeler and Web Developer

Tool

Maya; Three.js; JavaScript; HTML/CSS; File Zilla;

Method

3D Modeling; Version Control
carouselModel

1. 3D Model

In this phase, I first gathered reference images for the carousel architecture and rides such as deers, horses, and Pumpkin Wagon. Then I modeled these assets in Maya from scratch, structured and animated them.

2. Website & Interaction Development

The second part of this project was to develop a website, import 3d models into the website and make it interactive. I used Three.js to achieve this goal.

Through this project, I was able to enhance my skills in modeling and web development. I self-learned Three.js to enable interaction with 3D models on the webpage.

If time permits, I will refine the model more by attaching textures. I would also add multi-sensory elements such as audio to enhance its immersiveness.

Other work