This quartile we are going to choose a technology and explore it ourselves. I am very happy to have such opportunity because I enjoy freedom in my choices and when I am making the planning of a certain process myself I already feel inspired to challenge my abilities.
This week is dedicated to the exploration of technologies we are interested in , thus I want to see what is possible to create with 3D and make it interactive.
To do:
I want to say that this project was one of the most challenging and complicated for me because I had to set goals myself and estimate how much I want to learn on my own. This is quite challenging mostly because usually I tend to overestimate the size of the step which I want to take and underestimate the time which I will need to study the question on it’s best to actually get the knowledge which I want.
The most important thing to take into consideration when making an attempt to learn a completely new technology , is that this is only my knowledge, and knowledge is something what people or circumstances cannot take out from me and destroy it. I believe that knowledge is the main basis of success, and there is no point of resisting and trying to shirk from it , because in the end you only harm yourself.
Now, when the project is finished I have to admit that I feel proud of myself. I am happy that when I go deep enough with an assignment which even from the first glance seemed completely unreachable for me , I actually become intrigued by the possibilities. This is a great opportunity and a great lesson for me personally. A lesson about discipline, time management and strength.
This week was the big final step to finish the project.
My final steps were done to complete the result of my interactive product. This week I learned about textures, what are their properties, how they can be used in different ways , how to apply them and last but not the least how to make them interactive and change whenever I need it.
It was a very important knowledge to gain , because later in my career this professional knowledge will be a very important quality.
I want to understand how to assign a complicated object to a GUI and be able to configure it.
I have already created a GUI before, however the object which it was manipulating was quite a simple one. This time I am taking a bigger step and adding a complicated object with a lot more meshes.
How can I set up a code in order to expose a 3D model with a GUI and be able to make changes from the browser?
I decided to look through the three.js examples because I usually find a lot of useful information from their man page and documentation. After searching through it I noticed one decent example, which I can try to run on my computer, practice and modify it the way I need.
When I imported a code I was not able to see my model. I switched to the inspector view and it gave me a list of errors.
First of all, I could not give a proper path to the three.ja library. Then I checked the code and realized that I have installed the wrong one. I had a minified version, which firstly is not powerful enough for this specific goal I am willing to reach, and secondly in the main code I mentioned wrong name. So I changed it and now it was one error less. It was hard for me to manage to load and locate all libraries on the place where they are supposed to be.
Good thing is that now I know several different ways of finding libraries on the GitHub.
In the beginning of the code I define my effectControlles which are basically the short names for values I want to add functionallity to.
Here is the part of the code where I define Folders which are going to contain information for each action I want to control
After experimenting with the code a bit more I was able to display the model.
I also managed to load all libraries properly and now I can even configure some values, so the color, size or lighting changes, or I can also enable or disable some parts of the model.
Now I want to mix functionalities from the previous GUI I made with this one in order to be able to make more changes to the model . So now I am going to add one more menu button and make the teapot configuratable in x y z aixes.
Then I realized that I forgot to define variables for speed, so I added that as well.
However, adding only these lines was not the final solution to archieve my goal. I contacted my programming teacher Matthijs Van Veen to help me solving this issue and he explained me that I also had to defibe the “e” “f” “g” variables in the effectControllers and alo the renderer part was not called correctly.
I fixed those lines of the code and finally I was able to display my new menu part and control the size of the model on each side.
I am satisfied with the result and now I want to make it perfect and get rid of all the errors I have. Those are mostly missing textures and wrongly written paths to files. So I am going to fix it as well.
I created a skybox folder, and named them as it was written in the code, but instead of having textures I was getting a black screen.
I am loading textures and refering to pictures, however in the inspector view I see an error
I searched for an answer in stackoverflow and found a suggestion to run a code from my localhost. Gonna try it now
I placed my model on a localhost and magic happened! Now when I change the Shading mode and model reflects surrounding skybox.
I have also created a folder with textures and placed my own UV image on it. Now I am able to see it in “Texture” shading mode.
And here is the final result of my work!
Now I know how to texture an object, but in order to create an actual object/interior configurator I want to be able to change those textures by clicking on the object.
How do I make textures change?
First of all I googled my question on the web and , as always, there are a lot of different possible ways to reach my goal.
First of all it is possible to update current state – https://threejs.org/docs/#manual/introduction/How-to-update-things
In order to update state, I need to call correct functions , continuing reading a documentation I reached TextureLoader which I already used to show the texture before, however I can also add functionality with it – https://threejs.org/docs/#api/loaders/TextureLoader
I from what I understood, I have to create another texture in Blender, export it again and add to the code.
However, I could not find any way to make it actually work with what I coded.
Then I contacted my acquaintance , a student who graduated as a programmer several years ago, if he can give me any advises on what can help me adding this particular interaction to my object. I was given a hint to put my textures in array, so that they will be grouped and It will be then easier to add changes.
So, after I assigned a new texture from Blender using UV mapping , I exported a model with textures back to the JSON file and structured the folder.
Here in Json file the back1 is a default texture.
Now, in my main scene I set it up as a CurrentSitMaterial, so when we open the file this texture will be visible by default.
I did that, but for some reason I was not able to see the texture at all. I was struggling to make it work, however all of that was just a waste of time because nothing was showing up. After a lecture I asked my teacher Boris to help me solving this problem, however we could not find a solution.
I switched to the inspector view and realized that I was missing the part where I actually load the texture.
However that did not work out.
I started searching for and answer and I was only getting useless forums where I could not find the proper explanation of the way how can I make textures change
After of hours struggling I have found this option and tried to implement it.
https://stackoverflow.com/questions/35540880/three-textureloader-is-not-loading-
Nothing was loading anyway…
Being very close to the mental breakdown and feeling completely useless I contacted my another teacher Matthijs and on the next day we scheduled a meeting. He told me I was almost on the right way. Well, being on the “almost” right way is not that bad I guess..
He explained me that I had to call my meshes which I want to be able to change a texture with adding a reference to the texture file right away.
And then it was also a nice idea to create a dropdown menu or something like GUI to be able to change textures by navigating in the menu as that is also a good alternative to clicking on the object itself, which can sometimes work less precise when user will spin or zoom in.
Finally, with just a bit of help I managed to reach my goal!
And as sad and struggling I was, as I am in loss of words to explain what a great feeling it is to realize that something was was a huge barrier became a trampoline towards possibilities!
How do I make textures change?
In order to come to my final goal as close as possible, I want to know how to change colors of models by either clicking or by (ideally) attaching a model information to the GUI and control the whole process on the menu.
From all of the time of my three.js and javascript exploration I already have several favourite you tube channels where I can always find needed information with good explanation
I find this tutorial quite informative
On the meanwhile I was researching about possible ways of functionalities I found more interesting information considering 3D online configurators. Firstly, there are a lot of free open-source platforms where you can download your model in fbx format and share it with anyone you want.
For example, here is my model from this quartile’s another project which I created with Maya (however, this one is not finally ready yet, still misses textures and some parts). This website is quite handy if you want to show a preview for the client, but knowing how to create such page, personalize it , and let the client play with textures gives a whole another look and feel of a product. Plus it is a great added value.
Also the functionality which I am looking for is possible to be done with another extension of Blender, which is a Blender for Web.
Then I found one more tutorial to work on. Here the functionalities of javascript are explained very well, and finally, by following this tutorial I achieved this result!
With working on this tutorial I understood the functionality of javascript even better. Hopefully, understanding this logic will lead me to better understanding with my further programming experiments.
Here I found the explanation of a variety of materials which exist in three.js
I highly appreciate people who’s lives are fully consumed by the field of their interest, so they dedicate themselves to the job they do , and as a result they not only live their dreams, but also inspire others to learn, to become better and to challenge their possibilities. I really enjoy Daniel Shiffman’s video tutorials, because he explains everything in detail and with passion. So eve though it was a tutorial about p5js which is a bit different from three.js , I invested my time in exploring about it as well because there is no point in staying in the box of just one programming language , the possibilities are endless , and it is always important to broad horizons of the outlook.
To sum up, I want to say that this was certainly an important development step as it gave me a clear understanding of texturing process , I learned more about special functionalities of three.js and important tricks which I will keep in head for the future improvements.
How do I spin the object?
Last week I was working hard on exposing my 3D Blender model on the page. I was satisfied with the result, however now I want to add some functionality to the page.
Orbit controls allow the camera to orbit around a target. One point which I find very interesting, that , as it occurred, with the Object controls we can’t rotate the object itself (how it is usually done in such softwares as Blender/Maya etc) , but we are changing the camera angle, so that it is possible to see the object from various sides.
https://threejs.org/examples/misc_controls_orbit.html
As you can see on this example objects are staying on the same positions, but we are changing the camera position. 
I find this trick very logical because what is the point of rendering an object 25 times per second , when you can just change the camera angle to see it from sides.
I started reading the Three.js documentation to find out how do I actually include this functionality to my code.
https://threejs.org/docs/#examples/controls/OrbitControls
I see now that I will have to define the distance to the object and basically add a certain determination of how far or how close can I get to the model. It is possible to do with grouping all objects under one variable.
Then I could not find the correct documentation for this library. All of those which I tried were not full or were missing some lines or did not work with my code and web inspector was constantly showing a mistake
https://stackoverflow.com/questions/22899622/documentation-for-three-js-controls
After that I was trying to find the correct one and I went back on the official page of three.js and there again, in the documentation explanation I found the correct link.
examples/js/controls/OrbitControls.js
On codepen I saw what was the correct way of referring to the file, because keeping in mind the problem I had with referring to the correct folder and the correct file, and specially when it gets to coding something myself, it is better to check twice , re-check and check 4th time…
So in order to archieve what I want it to look like I searched for the tutorial of how to set up the file propperly
Here I found all information I needed, and ended up with this wonderful result!
One of the most important parts in observing a product online – is a possibility to navigate through the page. Specially when the product is a furniture or an object of an interior.
How do I add a possibility to move the object on a page?
How to move it to the sides?
How to zoom in and zoom out?
How close can I get without loosing the resolution?
Can I navigate on the trackpad only? Which kind of interactivity is more user friendly?
During these weeks I had a lot of fun exploring possibilities of three.js, however each time when I was ready to load my result on the web I always had some issues with either interaction, texturing or loading some parts of a scene. Luckily this week I found out a solution for all of that – installing my personal localhost. That was a tricky task to do. My main problem was , to be honest, my lack of concentration and laziness to read the full text. I notice this behaviour after myself from time to time and even if I hate waisting my time, so always trying to do everything properly on the first try, sometimes ,still ,my deconcentration appears as a barrier towards another goal.
With all of the work done before I feel myself being at the finish line towards my main goal. Just a few more steps are left to do, although having all experience with development steps I should not underestimate the amount of time needed for last steps.
How do I expose my 3D model on the web page and make it possible to be rotated and zoomed in?
To do:
I want to display a more complicated 3D object. How do I do that?
I have searched online and viewed several tutorials.
In this tutorial I saw how to export a model from blender. I followed same steps , but ended up with an error.
The problem was in a small, but meaningful point which was not mentioned in tutorial. I was struggling to find out the reason and then after consulting with my friend who had some experience in programming, we found out that the main problem was that in tutorial it was not explained that before even trying to display any object, it is necessary to install a local host.
Localhost means this computer in computer networking. On most computers localhost resolves to the IP address 127.0.0.1. The localhost is useful for programmers to test software independent of a network connection. Using the localhost bypasses the network card in a computer.
(Wikipedia says so)
Anyway, I never heard about it before, so I started my way in setting it up.
Local host basically means “the computer I’m working on”. It is useful to test websites and other applications which has to be online later on. Thus, instead of putting the whole application on an actual server, I can test it on my computer first.
https://www.apachefriends.org/ru/index.html
After installing and running it, the magic did not happened and I still could not display the object.
I searched for a hint on a FAQ of the apachefriends website. ( https://www.apachefriends.org/faq_osx.html )
And followed all steps from what was explained there.
a bit of patience and.. Voila!
But then I realized that it worked just because I opened a file directly, not via localhost. And of course HTML works, but when you have to display complicated meshes it takes more time and becomes tricky.
Learning from mistakes, I decided to check if I have actually installed a correct program. I went back to the website and installed another version of XAMPP. Which now gave me an opportunity to see a developer folder. The main trick in testing a web page with local host is in referring to a file correctly.
Thanks past me for the effort of learning how to export blender models from Blender to three.js files so that now it was not a big problem for me.
(https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/)
As the application itself contains quite a big number of files I did not know where to put my model. Also as I read on stackoverflow forum it was easier to refer to a json file in my index.html .
Then, after structuring and cleaning up my folder I found another helpful answer on stackoverflow ( https://stackoverflow.com/questions/25031093/running-json-files-on-the-apache-http-server-localhost ).
To refresh my memory of exporting models I practiced this tutorial once again
Finally I was happy to display the model of a chair!
æstetik 3D 