X3Dom and VRML so far

I had the video working without much bother, the VRML or 3D not so easy.
Tried with ThreeJs it worked but so many tutorials with different workflows
was confusing, will probably return at a later date.
X3Dom was very easy and didn’t need as much coding, it does what I need for now,I really want to get back to creating content. I added the code in the editor but it keeps putting it in different
grid sections. Not sure how to solve this problem, will continue.
Regards Ian

Reach out if you need help. Glad you are making progress!


I also saw a fw mentions to


As a newish project.
Its on github too.


Which it says is for data driven documents -which is handy to know, as im viewing it on a phone and it sure aint UX driven!
Non mobile,cant view it!

The following has a GREAT answer, on a slightly diiferrent approach for using it, but has some GREAT examples too.

Slightly different in,that it was more 2D Data /cnharting representation,Question but great explanation processes of using it for that

And giving examples such as

And then onto using 3d.js and canvas

This has great explanation with regards paints/repaints, nodes etc and the 3D.js render methodology,which understandably confuse some,with regards 3D and render etc.

But i really enjoyed watching this!

Which isnt 3d, but used an implementation of the boucoup.com example above.

This is great stuff.

For myself, i wanted to implement a simple,fast corridor with doors to rooms website nav.

I may try again now that everyting is bigger/faster/shinier, than my vrml attempts back in 2005 or so.

Oh and on mobile, your site looks like this.

Grrrrrrrr… :wink:


and with regards the grid putting it in the wrong place, there is an error in the code you can see when opening the url in PG.

Pinegrow says there is a missing /inline

at that namespace bit.
But im also struggling to work out what the namespace part is doing>?
Ive checked Moz docs, cant find it

ah! Im a dufus, I guess its to do with x3dom.js

N.B. VSCode doesnt complain about the missing /inline

So I was just going to use Pinegrow Snapshots to capture the site and play with it,
might have found a bug.

but… as usual, one bug, two horses, bad weather coming in, must dash! :slight_smile:
I will play with it later,
probably after I get drenched.

ps, with regards the layout, moving in grid,

Couldnt it be because the scene has a fixed size?

<x3d width='500px' height='400px'>

and so the grid can’t Resize it to move it about?

…straws, clutching at, x1, for the use of…


Scary dynamic javascript stuff.
its tricky!

im trying to save it locally, but cant with PG Snapshots

Hi thank you for your replies, there is plenty to look at. Babylon was going to be my next trial. Interesting slant article; surprised it didn’t include X3Dom/x3d. Will try and fix the current problem before moving on. Probably don’t need the namespace, it was a lazy bit of cut, paste and not testing.
Regards Ian

it has been driving me mad :stuck_out_tongue:
WHY cant I get that … 3d animation in that X3Dom… grid area!

just had food and tea, lets learn again and try and get it in there now.

Canvas, experience, 0%
X3D.js 0%
Grid… 20%

I see no problem here!


oh yes… Vanilla JS, 2%
Pinegrow implementation of Dynamic elements…oooh about the same…

Love a challenge… where’s my hammer

Bingo :slight_smile:

And i did a lot of other stuff before heading for the horses, so I’d better check if there is something else too.

update - external stylesheet style now.
I now have this for my external stylesheet, kauriViewer.css

.kauriViewer {
    grid-area: X3Dom;

#x3dom-1615699440440-canvas {
    width: 500px;
    height: 400px;

.x3dom-canvas {
    width: 500px;
    height: 400px;

And this for the page code.

        <link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'/>
        <link href="file:///Users/schpengle/Public/SITES/pinegrowKaurie/kauriStyles.css" rel="stylesheet" type="text/css">
    <body style="display:grid;grid-template-columns:minmax(10px, 100px) 500px 100px;grid-template-rows:113px 411px 100px;grid-template-areas:'. Title .' '. X3Dom .' '. footer .';grid-gap:20px;">
        <header style="grid-area: Title; background-color: #9dce33;">Young Kauri Tree</header>
        <div class="kauriViewer">
            <x3d width='500px' height='400px'>
                    <viewpoint position="-1.94639 1.79771 -2.89271" orientation="0.03886 0.99185 0.12133 3.75685"></viewpoint>
                    <inline nameSpaceName="Kauri" mapDEFToID="true" ' url="youngkauri.x3d" '>
        <footer style="grid-area: footer; background-color: #bcc4db;">

so I’ve saved the

grid-area: X3Dom
property in the


in the external stylesheet and applied it to that containing div

Ive left off the beginning and end of page code for brevity (rare for me)

First thing I tried was div, got it wrong, didn’t work for me. I will try your code and get back to it.

Tried Babylon even though I was going to wait, sandbox opened the Kauri file without problem and included the colour.

Oh well done.
Yes, I stuck the code up there for you, …interspersed with my rambling monologue as I explored :slight_smile:
I removed those extra canvas elemnts too, not sure if they were meant to be in there,
and some inverted commas from the name space, based on on this structure.


for the <inline namespace part.

Talking of which, I’m not sure if it is a PG parsing bug/error with regards that line and the tag matching,
or Im a dufus and got something wrong, but you probably noticed and got orange pop up error warnings about the inline part of your code in PG.
so I stuck a possible bug report in here too.

Great to see you doing this!
The whole 3d in the web thing had/has such potential!

and totally overlooked.
seems mad to me.

On my part I think it’s my age, 55 yrs old and still think computers are in some way are magical. Say Babylon and I add “5” on the end. Still fun and full of potential.
Thank you for your help.

Working page with x3Dom in correct space.
I will add some info and pretty the page later, had some issue with two trees claiming biggest status but now resolved.

Well done.
It takes AGES to download and render on my phone but then finally does

And lools like this :smiley:

Grids young man, GRIDS! :smiley:
hee hee.

I domt have very good signal on phone though either.

Excellent though, keep it up.
I was debugging it last night, im completely unable to capture a snapshot of your site with this tree
In Pinegrow Snapshots.
Failed with SiteSucker (an older, still free 2.x version)
Finally captured it with htttrack -along with its elusive kauri.x3d file…which the others wont capture and the 3dom.js file that neither captures, so i could then render it locally,turn internet off and Snapshots STILL wouldnt capture it.

But Pinegrow web editor does! which is all i actually wanted, but tried to localise it to explore.

That took longer than anything else

I’m back looking at some basic grid tutorials, Pinegrow and others to get a clearer understanding of CSS grid. Trying to run before I can walk, always my problem.