Development step 6 – setting up a local host and displaying a blender model

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.

Снимок экрана 2018-01-06 в 01.20.12

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

Снимок экрана 2018-01-10 в 21.24.17

After installing and running it, the magic did not happened and I still could not display the object.

Снимок экрана 2018-01-11 в 15.17.49

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.

Снимок экрана 2018-01-14 в 19.33.29

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/)

Снимок экрана 2018-01-12 в 14.32.40

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!

Снимок экрана 2018-01-14 в 20.30.05

 

 

Leave a comment