X3Dom: node().runtime is undefined?

Community Help
1

i’m trying to use this example of 3d plotting as my entry into the observable experience. it defines an x3d object, a call to x3d.node() returns an object, but x3d.node().runtime is undefined? any clues why that would be?

this sample code seems to assume an earlier version of d3 (eg, i had to change d3.scale.linear to d3.scaleLinear), and this issue may be similar?

1 Like
2

I assume you saw that x3d is from https://www.x3dom.org/ (not related to d3). That package may have changed quite a bit since that example was created (in 2015)

3

hi @Cobus , i did notice that it dependency, and have a line

x3dom = require “http://x3dom.org/x3dom/dist/x3dom-full.js”

that brings it into observable (i think?).

if there is a recent, more pure d3 example of 3d plotting i’d be very intererested.

4

I’ve used X3Dom a lot in Observable and I think it’s a natural fit. Generating 3D graphics by manipulating X3D via D3 feels a lot like generating 2D graphics by manipulating SVG in the same way, though there are certainly some difference as X3D/X3Dom just isn’t as integrated into Observable or even a standard web page, the way that SVG/D3 are.

Here are a couple examples of X3D on Observable:

I’ve also got a whole collection of things that I’ve created using a library built on top of X3Dom:

Finally, the code you point to does indeed have some incompatibilities with newer versions of D3. Here’s a version using a D3 V3 that works but seems to be missing some detail:

2 Likes
5

thanks lots @mcmcclur ! your collection will keep me busy learning for some time! trying to target appropriate versions of d3 seems like a challenge all by itself, but your working update makes it seem like the answer to my current question. thanks again.

1 Like
6

Yes. In fact, the grid did not appear due to the fact that the grid lines are polyline2d objects that aren’t included in the standard x3dom distribution but only as part of x3dom-full. I modified the code to require x3dom-full and it now works perfectly.

In addition, here’s a version that mostly works with the latest edition of D3. The axes don’t show up in this version, though, and I’m not sure why:

7

the changes I see you made to use the current d3 version were:

<     .append("orthoviewpoint")
<     .attr("fieldOfView", [-5, -5, 15, 15])
<     .attr("orientation", [-0.5, 1, 0.2, (1.12 * Math.PI) / 4])
<     .attr("position", [8, 4, 15]);
---
>     .append("viewpoint")
>     // .attr("fieldOfView", [-5, -5, 15, 15])
>     .attr("orientation", "-0.60226 0.78264 0.15736 0.84888")
>     .attr("position", "20.03316 18.73620 21.64114");

<     var scale = d3.scale
<       .linear()
---
>     var scale = d3
>       .scaleLinear()

<       .ease(ease)
---
>       .ease(d3.easeLinear)

your final version (“scene 3”) solved the flickering/refresh bug i was having, so i’ll do without the axes showing, for now:) thanks again.

8

If you use a code block the diff will render much better. You can do that with the “preformatted text” button in the toolbar.
image

1 Like
9

thanks @mythmon fixed it!

10

Yes - that’s correct. The change in the viewpoint was not really necessary; it was really just my personal preference and I didn’t actually mean to leave that change in there. :slight_smile:

11

Here’s a reproduction of the animation built with PlotX3D:

1 Like