Skip to content

Instantly share code, notes, and snippets.

@ZJONSSON
Last active September 27, 2015 15:28
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ZJONSSON/1291672 to your computer and use it in GitHub Desktop.
Simple X3D with D3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/v2.4.3/d3.js"></script>
<script type="text/javascript" src="http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
d3.ns.prefix.x3da="http://www.web3d.org/specifications/x3d-namespace"
x3d = d3.select("body")
.append("x3d:x3d")
.attr("height","500px")
.attr("width","100%");
scene = x3d.append("x3d:scene")
box= scene.append("x3d:shape")
.append("x3d:box")
</SCRIPT>
</html>
@johan
Copy link

johan commented Oct 17, 2011

This example would be even neater on http://bl.ocks.org/1291672 if it ate the mousewheel / wheel DOM events via e.preventDefault, after consuming them for the zooming.

@ZJONSSON
Copy link
Author

Agree completely. The purpose of this example and http://bl.ocks.org/1291667 was simply to demonstrate how D3 and X3DOM complement each other perfectly, without adding too much detail in the code.

PS: An alternative to mousewheel-zoom is holding right button and moving the mouse.
More detail here: http://x3dom.org/docs/latest/navigation.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment