# X3Dom and VRML so far

**URL:** <https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106>\
**Category:** Beginners\
**Created:** [March 14, 2021, 6:21am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106 "2021-03-14T06:21:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Idott](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Idott](https://forum.pinegrow.com/u/Idott)\
**Post date:** [March 14, 2021, 6:21am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/1 "2021-03-14T06:21:45Z")

</div>

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](https://idott.io/pinegrowKauri.html)  
Regards Ian

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [March 14, 2021, 10:05am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/2 "2021-03-14T10:05:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 14, 2021, 11:51am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/3 "2021-03-14T11:51:53Z")

</div>

Great!!

I also saw a fw mentions to

> **[Slant - 20 best alternatives to Three.js as of 2021](https://www.slant.co/options/11348/alternatives/~three-js-alternatives)**
>
> Three.js is a cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser using WebGL, CSS3D or SVG.

Babylon.js

> **[Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best](https://www.babylonjs.com/)**
>
> Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and...

As a newish project.  
Its on github too.

and  
Dj3.js.

> **[D3.js - Data-Driven Documents](https://d3js.org/)**
>
> D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.

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

> <https://stackoverflow.com/questions/27347798/comparison-between-d3-js-and-chart-js-only-for-charts>

And giving examples such as

> **[Epicyclic Gearing](https://observablehq.com/@mbostock/epicyclic-gearing)**
>
> From Wikipedia: “one or more outer gears, or planet gears, revolving about a central, or sun gear… Epicyclic gearing systems also incorporate the use of an outer ring gear or annulus, which meshes with the planet gears.”

And then onto using 3d.js and canvas

> **[Working with D3.js and Canvas: When and How - data visualization, design,...](https://bocoup.com/blog/d3js-and-canvas)**
>
> We can create charts quickly when working with D3.js and standard DOM elements, but that comes with a key limitation: the number of nodes we can render is fairly small. Have you ever tried to render a scatterplot with 1000+ circles in SVG? If you...

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!

> **[Watch as the world's cities appear one-by-one over 6,000 years - Metrocosm](http://metrocosm.com/history-of-cities/)**
>
> Facebook Twitter Google+ LinkedIn24.1KsharesWatch the rise of human cities, beginning with \[arguably\] the world’s first city in 3700 BC and continuing up to the present. Use the controls at the bottom to pause/resume the map and to move back and...

Which isnt 3d, but used an implementation of the [boucoup.com](http://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.

 ![Screenshot_20210314-105701](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2538b6aa699f2f70fa1eb5b1bda42dab06c3c315.jpeg)

 ![Screenshot_20210314-105755](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/737d21ef891bd65e5576e4d524470c7af3fee614.jpeg)

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.

 ![Screenshot 2021-03-14 at 13.15.03](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/297cb838ca5be482cd74cf193cf6dafe2165483e.png)

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](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!

> **[Working with dynamic HTML elements | Pinegrow Web Editor](https://pinegrow.com/docs/master-pinegrow/working-with-dynamic-html-elements/)**
>
> Dynamic elements are HTML elements created by Javascript code after the page loads.

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

---

<div class="post-metadata">

**Author:** ![Idott](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Idott](https://forum.pinegrow.com/u/Idott)\
**Post date:** [March 14, 2021, 7:33pm UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/4 "2021-03-14T19:33:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 14, 2021, 8:11pm UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/5 "2021-03-14T20:11:51Z")

</div>

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 🙂

 ![Screenshot 2021-03-14 at 20.22.12](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/cf541fa977c9c8918812f38d53014f0a0e567f92.png)

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

```auto
.kauriViewer {
    grid-area: X3Dom;
}

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

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

```

And this for the page code.

```auto
        <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)

---

<div class="post-metadata">

**Author:** ![Idott](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Idott](https://forum.pinegrow.com/u/Idott)\
**Post date:** [March 15, 2021, 1:28am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/6 "2021-03-15T01:28:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 15, 2021, 2:20am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/7 "2021-03-15T02:20:13Z")

</div>

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/](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.

> [@\<Inline namespace Tag bug](https://forum.pinegrow.com/t/inline-namespace-bug/5109):
>
> Hello there, again, me, in the bug channel… If you use Pinegrow to view the remote file at [https://idott.io/pinegrowKauri.html](https://idott.io/pinegrowKauri.html) and view the page source for kauri.html you will find that the line \<inline nameSpaceName="Kauri" mapDEFToID="true" ' url="youngkauri.x3d" '\> throws a wobbler as it is looking for a closing tag for the inline tag. lots of orange warning boxes about errors when editing and saving other things from that point on, a bit confusing. I checked [https://www.x3dom.org/in…](https://www.x3dom.org/inline-html-reflection/)

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

and totally overlooked.  
seems mad to me.

---

<div class="post-metadata">

**Author:** ![Idott](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Idott](https://forum.pinegrow.com/u/Idott)\
**Post date:** [March 15, 2021, 2:39am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/8 "2021-03-15T02:39:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Idott](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Idott](https://forum.pinegrow.com/u/Idott)\
**Post date:** [March 17, 2021, 5:28am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/9 "2021-03-17T05:28:52Z")

</div>

Working page with x3Dom in correct space.  
[https://idott.io/KauriTree.html](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.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 17, 2021, 8:58am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/10 "2021-03-17T08:58:28Z")

</div>

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.

 ![Screenshot_20210317-084929](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/572fcd99eb40e4e0491c1603d159cbdd472c6fd6.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Idott](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Idott](https://forum.pinegrow.com/u/Idott)\
**Post date:** [March 17, 2021, 9:15am UTC](https://forum.pinegrow.com/t/x3dom-and-vrml-so-far/5106/11 "2021-03-17T09:15:35Z")

</div>

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.