Hi,
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.
Link
https://idott.io/pinegrowKauri.html
Regards Ian
Reach out if you need help. Glad you are making progress!
Cheers,
Bob
Great!!
I also saw a fw mentions to
Babylon.js
As a newish project.
Its on github too.
and
Dj3.js.
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… 
update
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
https://developer.mozilla.org/en-US/search?q=namespace
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,
but,
might have found a bug.
but… as usual, one bug, two horses, bad weather coming in, must dash! 
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…
Woah
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
Ha!
it has been driving me mad 
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!
FORWARD!!>>>>>
Charge!!!
oh yes… Vanilla JS, 2%
Pinegrow implementation of Dynamic elements…oooh about the same…
Fab!
Love a challenge… where’s my hammer
Bingo
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.
Ok,
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">
</head>
<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'>
<scene>
<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" '>
</scene>
</x3d>
</div>
<footer style="grid-area: footer; background-color: #bcc4db;">
so I’ve saved the
grid-area: X3Dom
property in the
"kauriViewer"class
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.
Thankyou.
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 
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.
https://www.x3dom.org/inline-html-reflection/
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.
https://idott.io/KauriTree.html
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 
Grids young man, GRIDS!
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.