• Monday , 21 October 2019

Blender 2.5 Displaying 3D Models in Web Pages Using Webgl Exporting X3D Files and using X3DOM Part 1

Code Canyon

https://i.ytimg.com/vi/W_e7xbVyx2s/hqdefault.jpg



This video tutorial shows how to export a model from Blender in the X3D file format. There are two ways of embedding X3D file in a web page, part 1 shows a way where the web page can be viewed locally without having to be uploaded to a web server.

All this is made possible by software from the open source project X3DOM (pronounced X freedom).

Key points –
How to export a model from Blender in the X3D file format.
How to open the X3D file in a text editor (notepad++ used in tutorial)
How to convert the X3D file into a HTML web page with the 3D data embedded in it (using a converter utility provided by X3DOM).
How to view the page in a browser that supports Webgl (Firefox, Chrome and Safari, latest versions).
How to modify the 3D data in the web page.

source

3d Ocean

Related Posts

17 Comments

  1. Leandra Cherella
    September 18, 2019 at 03:04

    Hi, this tutorial was exectly that topic who i needed. Unfortunetly, it didnt work. I did every step like in the tutorial and after that, just the html code was on the browser side to see. Could maybe someone help me? Thx forward!

  2. Mohamed Osama
    September 18, 2019 at 03:04

    thankkkkkk you very much.
    keep up the amazing work 👌👌👌👌👌👌👌.

  3. Shikhar Verma
    September 18, 2019 at 03:04

    Hey nice video can u help me .. Can i export whole animation using this thing??

  4. Dr Werenverlivitz
    September 18, 2019 at 03:04

    How can I move the camera with the mouse and keyboard?

  5. JT-Media
    September 18, 2019 at 03:04

    It moves around instead of rotating.

  6. Noureddine Kiran
    September 18, 2019 at 03:04

    i do like u but it pan the object how i can rotate automaticly on the browser

  7. Gosman Eduardo Gallego
    September 18, 2019 at 03:04

    how i can to set the camera? its rotate around the world, is better if it rotate around the object.

  8. Ramiro
    September 18, 2019 at 03:04

    Is this only possible in models with rgb colors and without textures?

  9. sketcherskt
    September 18, 2019 at 03:04

    if i made a small interface with blender game engine will the buttons and stuff work this way ps i have not watch the entire video but i thought i ask

  10. Tripflix
    September 18, 2019 at 03:04

    Awsome tutorial…I have a question…I export my model and use the converter online tool. When I open it in chrome my model is just all white with a black background…my texture data is saved as a .png in the same location as html and I used a uv map for it. What am I doing wrong?

  11. 3D Blender Tutorials by ianscott888
    September 18, 2019 at 03:04

    I am glad you sorted the textures, I would like some JavaScript that would allow Blender models to be embedded directly into to web pages, that would be good!

  12. 3D Blender Tutorials by ianscott888
    September 18, 2019 at 03:04

    It is a while since I looked at this, about the only things I can suggest is double check that the link is relative (just the file name in the link if it is in the same directory or "./filename.jpg"), case sensitivity in the file name and the problem with the image file having to be square and its dimensions a power of two.

  13. 3D Blender Tutorials by ianscott888
    September 18, 2019 at 03:04

    See my tutorial – Blender 2.5 Displaying 3D Models in Web Pages Using Webgl and the X3D Format Part 4 Texture Files.

  14. 3D Blender Tutorials by ianscott888
    September 18, 2019 at 03:04

    @forge021 Try downloading the files from my website and see if they work.

  15. Paul Christian Rivera
    September 18, 2019 at 03:04

    i follow the instruction but nothing display at the browser.. only clear box …
    how to fix it?

  16. dbzfan5050
    September 18, 2019 at 03:04

    is there a way so i can just have my rendered image as an ordinary image file which can be viewed in windows picture viewer and opened in fireworks

  17. someonecares2
    September 18, 2019 at 03:04

    Great video. I was unable to display any of the examples from X3DOM, so I found the reason on their website under Documentation – Installation – blacklists. It turns out the pc I was using is, basically, too old for X3DOM to display. (even though I had all the latest updated browsers. Solution was to use my kids pc (much newer) and it works great. Really cool! Notepad ++ is super as well. Thanks!

Leave A Comment

You must be logged in to post a comment.