ElIMS — MuW201

Moza Alq
4 min readDec 15, 2020

--

Elims

My project was inspired by Hattie Stewart. I have created a virtual reality land that is inspired by one of my favorite artist I have taken small elements from her paintings and project and included it in my land I decided to stick with the colorful pattern of pallet and with the cartoon animated style I began by thinking about what Color would be more suitable in each image as I didn’t wanted to clash so much I also built a 3-D model of characters that I have called to Dodo Elims The name of the world I have created is called Elims which is smile backwards looking at this I want to use her to feel happy and joyful and to radiate positive energy throughout my process I have explored many different codes to allow each character or painting to interact a certain way that can send positive visual. I have also included a few paintings of mine that resonate with the aesthetic of my inspiration. We tend to look at cartoons and find it very peaceful fun and enjoyable for kids creating a virtual reality that can have a meaning behind it and look like a playful childlike view can give a user a different observation. The low poly land gives an unfinished child like drawing with colorful solid details which makes it stand out. Throughout coding this I found it very enjoyable as I was able to have a lot of freedom into choosing what elements should or shouldn’t be there. In my first project, I have created a filter of students floating around the head that is sketched out by me so I wanted to include the same element where Elims showcases floating heads.

Process

First Phase

Using Blender /PNG images

I included all the elements needed. But found difficulty with applying the MTL files from blender .

Background looked grainy.

Paintings / Images

Tutorial

Software needed

  • Three.js library
  • WebGL support machine

Step-by-step guidance

  1. Prepare 3D models

We need both 3D model(.OBJ) and texture(.MTL) to render 3D models properly.

2. Write HTML and create Three.js container

Index.html

3. Load 3D models and textures

objloader.js

4. Init Scene, add Camera, add Lights

app.js

5. Add 3d objects to the scene

6. Animate objects

7. Add VR feature

Through many trials and errors, I was able to understand the way Web VR works.

I think in the future process I am able to add more elements and characters to allow the scene to look complete I learn skills that would help me in the future I’m trying to find more interactive ways for the user to feel like it’s happening in real life I have also learned how important it is to make sure the MTL file is recognized. This project may be one of my favorites as I had fun doing the process of coding and making every piece come to life digitally I was able to use my creative slow end my own identity to it. I still have much more to learn and to perfect everything seeing where I began I could see a big improvement enjoy the process and have found this to be one of my favorite lessons.

--

--