Code Explanation: Obj Model
As mentioned previously, I added the correct scripts to my js folder and used an apple model as a placeholder. Because I decided to use two elements which both used three.js, I needed to change the names of the variables as they were the same as the variables used for the landing page. Therefore, there was some confusion in the code and these scripts didn't work together due to the duplication of names as they were trying to use each others variables. I added a 2 after every variable/function so that there was no risk of this happening.
Variables for the container, camera, scene and rendered were defined.
The variable mouseX and mouseY was set to zero as a default position for the model (as the mouses position controls the view of the model). The variables windowHalfX and WindowHalfY were originally set to half of the window.innerWidth and window.innerHeight (e.g. window.innerWidth / 2) however I needed to change the size of the window being displayed as originally the model wasn't central as the window size was very large.
A new camera was created nd assigned to the camera2 variable. This was set so that the vertical field of view was set to 45, the aspect ratio was set to the inner width divided by the inner height of the window, the near plane was set to 1 while the far plane was set to 2000. The position of the camera on the z-axis was 250.
A new scene was created and assigned to the scene2 variable. AmbientLight was created and assigned to the variable ambientLight2 which was set to a grey colour with an alpha of 0.4 and was added to the scene. While PointLight was created and assigned to the variable pointLight2 which was set to white with an aplha of 0.8 and was added to the camera. The camera was then added to the scene. This was so that the model would have some lighting and would look more 3D.
The function loadModel2 takes the variable object2 that has .tranverse which executes the callback on child2 and all it's descendants. If child2 (the object) is a mesh then the material for the object will equal texture2 which included the path to an image file for the texture of the object.
The position of the object on the y-axis is equal to zero and this object is added to the scene.
The variable manager creates a new loading manager that loads the model and logs these aspects in the console. The variable textureLoader2 creates a new texture loader that uses the manager2 variable. The variable texture2 loads the image for the texture of the object.
The function onProgress2 allows the browser to download the object while the onError function is triggered if an error occurs while loading an external file. The variable loader2 is assigned to a new Obj loader which also uses the manager2 variable. The path of the obj model is assigned to the varaible and loaded. The functions onProgress2 and onError2 are called.
The variable renderer2 is assigned to a new WebGL renderer which will render the object. The pixel ratio and size of the window is set.
The container2 variable is assigned to the ID selector so that I can place where I would like this model, which is then rendered. An event listener is added to check is the mouse is moving on the document and calls the function onDocumentMouseMove2 which moves the window on the x and y-axis due to the mouse moving. For example when the mouse moves to the left, the object will move.
The function onWindowResize2, resizes the window of the render and the camera which then is updated. The function animate2 animates the model using frames which then is rendered due to the render2 function being called.
The render2 function changes the position of the camera on the x and y-axis due to the where the mouse is positioned on the x and y-axis minused by the position of camera2 on this axis' multiplied by 0.05. The scene and camera is then rendered.
I wanted to change the original background colour to either transparent or the colour of my background. After researching I found that I wasn't able to make my background transparent however I was able to make my model transparent. Therefore, I changed this background to the colour of the background colour of the website.
Variables for the container, camera, scene and rendered were defined.
The variable mouseX and mouseY was set to zero as a default position for the model (as the mouses position controls the view of the model). The variables windowHalfX and WindowHalfY were originally set to half of the window.innerWidth and window.innerHeight (e.g. window.innerWidth / 2) however I needed to change the size of the window being displayed as originally the model wasn't central as the window size was very large.
A new camera was created nd assigned to the camera2 variable. This was set so that the vertical field of view was set to 45, the aspect ratio was set to the inner width divided by the inner height of the window, the near plane was set to 1 while the far plane was set to 2000. The position of the camera on the z-axis was 250.
A new scene was created and assigned to the scene2 variable. AmbientLight was created and assigned to the variable ambientLight2 which was set to a grey colour with an alpha of 0.4 and was added to the scene. While PointLight was created and assigned to the variable pointLight2 which was set to white with an aplha of 0.8 and was added to the camera. The camera was then added to the scene. This was so that the model would have some lighting and would look more 3D.
The function loadModel2 takes the variable object2 that has .tranverse which executes the callback on child2 and all it's descendants. If child2 (the object) is a mesh then the material for the object will equal texture2 which included the path to an image file for the texture of the object.
The position of the object on the y-axis is equal to zero and this object is added to the scene.
The variable manager creates a new loading manager that loads the model and logs these aspects in the console. The variable textureLoader2 creates a new texture loader that uses the manager2 variable. The variable texture2 loads the image for the texture of the object.
The function onProgress2 allows the browser to download the object while the onError function is triggered if an error occurs while loading an external file. The variable loader2 is assigned to a new Obj loader which also uses the manager2 variable. The path of the obj model is assigned to the varaible and loaded. The functions onProgress2 and onError2 are called.
The variable renderer2 is assigned to a new WebGL renderer which will render the object. The pixel ratio and size of the window is set.
The container2 variable is assigned to the ID selector so that I can place where I would like this model, which is then rendered. An event listener is added to check is the mouse is moving on the document and calls the function onDocumentMouseMove2 which moves the window on the x and y-axis due to the mouse moving. For example when the mouse moves to the left, the object will move.
The function onWindowResize2, resizes the window of the render and the camera which then is updated. The function animate2 animates the model using frames which then is rendered due to the render2 function being called.
The render2 function changes the position of the camera on the x and y-axis due to the where the mouse is positioned on the x and y-axis minused by the position of camera2 on this axis' multiplied by 0.05. The scene and camera is then rendered.
I wanted to change the original background colour to either transparent or the colour of my background. After researching I found that I wasn't able to make my background transparent however I was able to make my model transparent. Therefore, I changed this background to the colour of the background colour of the website.
Comments