Three.JS Implementation

I wanted my landing page to have a three.js background to make my website stand out.
I decided to use one of the examples given on the three.js website.

(Three.js, n.d.)

Before copying the source code, I downloaded the three.js folder (Three.js, n.d.) which included all of the scripts and images from every example displayed on the site.

The source code included three scripts which needed to be included in my portfolio folder as well as the texture sprite (spark.png) image.




I edited the source code slightly to fit with my website and changed the file paths of the scripts and images. I removed the stats script and code so that I wouldn't have the stats at the top of my page.
Then, I added an ID selector in my SCSS file which I converted into CSS so that I would be able to change where the three.js would be displayed. I set this position to absolute so that the positioning of this element was able to be set.




I changed the ID name in the brackets of document.getElementByID to the name of this ID (layerBackgroundMe) so that the document knows where this element can be found.



I added a div ID with this named element and placed this in the code so that it was in the background of my landing page. The text and button is displayed on top of this effect and worked successfully.






I also wanted to add a 3D model (obj) so that I already had the code set up for when Zahra had finished the model of my head. By editing the source code from this three.js example I was able to add different models to my website and have settled for this apple as my placeholder.





I used the same process when inserting the code needed for my 3D model however I needed to change the names of the variables and functions used as they used the same names that were used previously. This was causing confusion as the document was trying to use the wrong pieces of code, causing both three.js elements to not work. Therefore after changing these names this worked successfully.



 Bibliography
GITHUB. (n.d.). mrdoob/three.js. [Source Code] [Online] Available at: https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_custom_attributes_particles.html [Accessed: 14 December 2018]
GITHUB. (n.d.). mrdoob/three.js. [Source Code] [Online] Available at: https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj.html [Accessed: 14 December 2018]
THREEJS. (n.d.). three.js / examples. [Online] Available at: https://threejs.org/examples/#webgl_buffergeometry_custom_attributes_particles [Accessed: 14 December 2018]
THREEJS. (n.d.). three.js / examples. [Online] Available at: https://threejs.org/examples/?q=obj#webgl_loader_obj [Accessed: 14 December 2018]
THREEJS. (n.d.). three.js. [Online] Available at: https://threejs.org [Accessed: 14 December 2018]

Comments

Post a Comment

Popular posts from this blog

Unity Project 4: Ball platformer game

Image
Finished game displayed in the scene view. Scene view Assets Uses Rigidbody so that the ball can use physics (Gravity) therefore it doesn't fall through the ground. The 'Rolling Ball' script is attached to the ball which adds force to the ball. Ball Inspector Scene view displaying the invisible cube object which can be used as a trigger for an event. Scene view When the console prints 'COLLIDED', the ball has collided with a specific object (Invisible cube). Console Message The invisible cube that is attached to the 'Trigger' script. When an object does not have a mesh renderer, the object becomes invisible as we cannot see it due to it not having a mesh. Cube Inspector Field of view changed, so that the ball can be seen from a slightly different angle. Follow target script also attached allowing a first person type view of the ball as the camera is set to follow the ball's movement. The camera can be moved so tha
Read more

[Research] Traditional Poster Design (4CTA1214)

Image
As you can see from the superman poster, there are only four main colours used which includes red, blue, yellow and brown. All elements are filled in with block colours with no shading which was a common colour theme for traditional posters of this kind. This poster may have been used to advertise a new Superman comic or movie depending on the year it was created. The expression on the characters face fits the title shown on the poster explaining that he is returning. This poster advertised Coca Cola, and looks as though this specific poster was used in the USA - due to the currency used. The whole aim of the poster is to incorporate this drink into working peoples daily lives. This is seen by the slogan, 'Work refreshed' and the small graphics on the bottom right of the poster. Displayed is a man working in a factory environment and a lady is working in an office environment both drinking cola during their breaks - to feel refreshed. In some ways the bottle and
Read more