Overview

I am Britney Tu, a student studying UX and UI at Drexel University. This project was about experimenting applying 3D media on the web using THREE.js. I ended up going with a 3D model that a user can interact with. Overall I believe this project was useful with applying 3D media onto the web.

Context & Challenge

I specifically wanted to work with a 3D model and animation as I have little to no experience with working with one; especially applying it to the web. The project exist to expand on my existing knowledge of web development and apply it to WebVR with THREE.js. Knowing the idea of what I wanted to create, I had to just figure out how the particular 3D model I was using can be applied to existing example code.

Code/Dev

First issue I had was getting the animation to work. After playing around with several different animation functions with three.js I was able to get my 3D model of a rubix cube to animate.

   var animation = mixer.clipAction(model.animations[0]);
   animation.setLoop( THREE.LoopOnce );
   animation.play().reset();

This piece of code allowed the animation to play and stop after once loop. The .reset(); allows for future calls of the animation to be played on command 1 time as noted with .setLoop(THREE.LoopOnce);

Afterwards I had to figure-out how to attach these buttons to the functions to trigger the animation and rotation I wanted to include in the build

• Shuffle Button currently only plays animation ONCE, needs to be adjusted to do it unlimited clicks of the button.
• Properly update status for SHUFFLE; check for when the animation end after 1 LOOP

The two points above I had the most trouble in since I wasn't able to figure out how long each animation was within the 3-D model. Eventually though I was able to figure out how to address this issue by using setTimeout(); function. I then timed how long the animation is and had a function code to reset information as needed if the animation was fully played out. If the user clicked on the button before the animation finished, the information would be reset and any other associated data

Solution

This build allows users to interact with the 3D object in multiple ways. They can toggle the auto rotation as well as the animation of the cube doing a simple shuffling of the cube. Below the interface, users can change the background color of the VR space to any color they wish to with the color picker included

Results

This project was a success as I was able to have the 3D model appear and be interactable. Features include orbit rotation, toggle auto rotation, play animation, and change the background of the model with the color picker. I learned a lot with this project as I got to work with javaScript and how that relates to THREE.js