xml3d / xml3d.js

The WebGL/JS implementation of XML3D
Other
75 stars 25 forks source link

Panning and center-axis rotation #161

Closed chriscarex closed 8 years ago

chriscarex commented 8 years ago

Hi, I would really appreciate to have panning and object center-axis rotation in the examine navigation mode. Let me know if you plan to add it and when. All the best, Christian

csvurt commented 8 years ago

Hi, panning should work in examine mode using the middle mouse button (pressing the scroll wheel in most cases) but I just stumbled on a bug that caused it to break in some cases, I'll push a fix to the hotfix-5.0.2 branch today.

Can you clarify what you mean by center-axis rotation? The camera can already move to and rotate around the center of the object's bounding box with the .examine(element) function:

var camera = new XML3D.StandardCamera(viewElement, {mode: "examine"});
var target = document.getElementById("myExamineTarget"); // can be a mesh, group or model element
camera.examine(target);

Is that what you were after?

chriscarex commented 8 years ago

Hi, thanks for the suggestion, I tried to add the following code:

  function onload() {
    var viewElement = document.getElementById("transformStl");
    var cam = new XML3D.StandardCamera(viewElement, {mode: "examine"});
    cam.examine(viewElement);
  }

but it's doing exactly the same as using navigation mode examine: he just rotates around the camera axis and not the object axis - what I am doing wrong?

You are right panning works with the middle mouse button but it's very slow, it should change the panning translation range according to the mouse movement. Same for zooming, is not very reactive. I think it should be an easy fix, let me know if you can solve it quickly, thanks!

chriscarex commented 8 years ago

I think I solved the problem with the following code

'''javascript function onload() { var viewElement = document.getElementById("mainView"); //id of view tag in xml3d var cam = new XML3D.StandardCamera(viewElement, {mode: "examine"}); } '''

and by changing the default value in camera.js '''javascript this.rotateSpeed = opt.rotateSpeed || 7; //default 3 this.zoomSpeed = opt.zoomSpeed || 200; //default:20 '''

Let me know if this could be a good solution or I made some mistakes!

csvurt commented 8 years ago

You can change the speed using the zoomSpeed field either in the options when creating the controller or later with cam.zoomSpeed. It should actually be called "translateSpeed" because it affects both zoom and panning speed.

We probably won't add code to set this automatically because it's hard to define a behavior that's right for all scenes. We'd rather leave that up to the user, for example by changing the zoomSpeed based on what's going on in the scene (you could set the zoomSpeed based on the distance from the camera to the object that you're examining for example).

About the rotation, I'm not sure what you want to do. Do you mean the object should be rotated around its center instead of the camera being rotated around the object?

chriscarex commented 8 years ago

ok for the zoom and panning speed, you are right, it should be adapted by the user.

With the last part of the code I posted before it's working now, the camera stays fixed but the object is rotating around its own axis. so problems solved. By my side, you can close this issue. Maybe it would be helpful to add a page describing how to set the navitagion parameters correctly in the wiki.

csvurt commented 8 years ago

Yup good idea, I'll add a section to the wiki and put a link to it in the source code of the camera controller. Glad it's working now!

chriscarex commented 8 years ago

Thanks I'm glad as well :) If you can add a section explaining how to get the 6 bounding box values that would be great as well :)

csvurt commented 8 years ago

Check the specification the interfaces are all defined there including how to get the bounding box ;)

It's basically just

var element = document.getElementById("someElement");
var bbox = element.getWorldBoundingBox();

where element can be either a mesh, group or model element in your scene.

csvurt commented 8 years ago

I added a section in the Wiki on the camera controller.