Collaboration: Zahra Abbas

When creating my website mockups, I decided that I wanted to have a 3D image of my head/shoulders on my portfolio website (either on the landing page or in the 'About Me' section) and therefore asked Zahra Abbas who studies a BA (Hons) 3D Computer Animation and Modelling at the University of Hertfordshire whether she could create this model for me as I am not familiar with working in 3D.

We began with taking multiple photos of me with my hair tied up - which she said she would create afterwards in a 3D modelling software. She said she needed to photograph all around me so that when she imports these pictures into the software it would be able to extract information which would create a 3D version of me.

Unfortunately there were many problems to do with the lighting and clarity of the camera. We couldn't use the autofocus on the camera as well as the flash as it would add extra lighting that would make the image look strange and inconsistent.

Zahra explained that when she put the photographs together, they produced a density cloud which meant that some of the photographs overlapped and therefore she needed to clean this up.

Work in progress model by Zahra Abbas

Once this was complete she then ran this through a 3D software however the object turned out odd and therefore she said she needed to fix these up manually but this would take her more time.

Work in progress models by Zahra Abbas 

Due to the amount of time that this would take her to fix, I decided that I would use a placeholder model so that I can make sure that the three.js code will work within the site. Then once my model is complete I will just need to change the path so that the correct obj model is linked and add a image (jpg) texture to the model. Using a placeholder will save me time overall, as I would just need to tweak the code when I recieve the model.

I used this free apple model that I downloaded online (Turbosquid, 2010) and used this in my code as a placeholder until Zahra has finished my model. The apple model worked successfully with the three.js code used.

Once Zahra cleaned up the model, she sent it to me via Google Drive.
There were many versions due to Zahra updating the model and problems that occured while testing.




One particular problem that occured was due to the programme that Zahra was editing the sculpture in. The website preview suffered from latency as the model was so dense, it was also the wrong way round which Zahra explained that the programme may have switched the axis of the model while exporting. This caused the model to be viewed either at 90 degrees or from a top-down view.

Zahra sent me a new version that didn't cause this problem as she exported it differently.

Zahra sent me the final version which I put into my website. She decided to stylised it slightly and added a drippy/melted effect which I thought was really cool!

We tried to add a texture to the model and researched into ways of doing this using three.js.

There were many ways wee could have done this, by adding a phong or lambert material however we discovered that three.js had it's own standard material which created faked physics with maps.

After many attempts at trying to implement this, the preview produced a black canvas or black model. I believe this may have been due to the example I used from the three,js website not being set up to use materials in this way.

Another option was to use the three.js editor, Zahra suggested that I should pick a standard material with the metalness on high. She explained that diffuse meant that diffuse means colour, emmissive makes it glow, roughness takes away the shininess and clear cloat makes it look as though it has a varnish on it. Unfortunately using the editor didn't seem to work either. Therefore, I added a solid pink colour .jpg that fit with the design of the site instead which has worked well.

 

I was debating whether to make the model move with the mouse, as I had the model set up to do this. However I only wanted the model to move slightly which was difficult to achieve. I also wanted the model to start by looking at the user however the model would start off slightly sideways. I realised that this feature didn't work on mobile and therefore was stuck into this position when viewed. Therefore I have decided to take this feature out.

Bibliography
TURBOSQUID. (2010) Apple. [3D Model] [Online] Available at: https://www.turbosquid.com/FullPreview/Index.cfm/ID/549455 [Accessed: 13 December 2018]