Search code examples
javascriptd3.jsx3dom

d3.js x3dom: How to freeze camera position and get an axis?


I saw the 3d bar chart example of d3 and another 3d example, and the one thing I wanted to do was to be able to have a static camera position. Tried the viewpoint fieldOfView, but it just doesn't seem to work. Can anyone help with having a camera at a fixed position? I don't want the user to be able to rotate the 3d scene.

Also, I couldn't figure out how they displayed the x, y and x axes on the screen. Is there a tutorial or an API reference with which I can figure out how to use x3dom in d3.js? I want to know what the commands and syntax are.


Solution

  • x3dom doesn't have option to disable rotation. But you can add modify their source code to do it. I did this for one of my projects:

    // add disableRotation option
    var validParams = array_to_object([
      // ...
      'disableRotation',
      // ...
    ]);
    
    // disable rotation onDrag
    x3dom.Viewarea.prototype.onDrag = function (x, y, buttonState) {
      // ...
      if (this._doc.properties.getProperty('disableRotation', 'false') === 'true' && buttonState === 1) {
        return;
      }
    }
    
    // append this to your x3d tag
    x3d.append("param")
       .attr("name", "disableRotation")
       .attr("value", "false");
    

    See this example for how to draw axes on screen:

    http://bl.ocks.org/hlvoorhees/5986172