Camera Position - (Web)

Developers
#1

From this interesting discussion I got curious about seeing if I could hook up my SpaceMouse to work in SketchUp Web.

Unfortunately I was unable to find a way to change the camera position (yet).

In another 3D web app that we use for quoting I was able to manipulate the camera, but I’m not quite sure how to calculate all the moves from the six axes.

So I can set the camera position and target like this, but I’m not sure how to calculate the values.

function updateController() {
  axes = navigator.getGamepads()[1].axes
  pan_lr_delta = axes[0];
  pan_ud_delta = axes[2];
  zoom_delta = axes[1];
  rotate_ud_delta = axes[3];
  rotate_lr_delta = axes[4];
  orbit_delta = axes[5];
  //Set the camera target and position
  //???
  camera.position.set(x, y, z,);
  controls.target.set(x, y, z);
  controls.update();
  requestAnimationFrame(updateController);
}

PS: @TheOnlyAaron Is there any chance that the same thing could be done in SketchUp Web? It seems like it would be trivial to implement. Obviously there is a camera control in there somewhere already.

#2

The controls.target and camera.position are both a Vector3

https://threejs.org/docs/#api/en/math/Vector3

#3

It could be trivial, I did the same with other web 3D engines, I have code somewhere that I tried for SketchUp. But for SketchUp I don’t know the API to set the camera position.

I was in talk with engineers at BaseCamp 2018 and the idea did not seem new to them at all. I guess there is a long way from finding out at a hackathon that something is possible to making it part of a supportable product.

#4

OK I got the zoom and up/down panning working nicely (in SmartBuild), but I’m stuck on the rotation, orbit, and left/right pan.

I realize this isn’t really a SketchUp question.

function updateController() {
  if(document.hasFocus()) {
    axes = navigator.getGamepads()[1].axes
    pan_lr_delta = axes[0];
    pan_ud_delta = axes[2] * 10;
    zoom_delta = axes[1] * 25;
    rotate_ud_delta = axes[3];
    rotate_lr_delta = axes[4];
    orbit_delta = axes[5];

    //Set the camera target and position
        camera_direction = new THREE.Vector3();
    camera_direction.subVectors(camera.position, controls.target);
    distance = camera_direction.length();
    //zoom
    if (zoom_delta != 0){
      console.log(distance);
      distance_factor = (distance / 100) + 0.1
      camera_direction.setLength(0 - (distance_factor * zoom_delta));

      camera.position.add(camera_direction);
      if (distance < 10 && zoom_delta > 0) controls.target.add(camera_direction);
    }
    //up and down pan
    if (pan_ud_delta != 0) {
      controls.target.z += pan_ud_delta;
      camera.position.z += pan_ud_delta;
    }


    // camera.position.set(x, y, z,);
    // controls.target.set(x, y, z);
    controls.update();
  }
  requestAnimationFrame(updateController);
}
#5

Not much I can add to this… I am not part of the web development team and, for that matter, have never created any extension code, myself!

I do love using a 3D mouse, though!

1 Like
#6

I have some js code somewhere. Roughly a year ago i made a space mouse controlled relay board. The actual code interacting with the spacemouse was in JS.

I will set a note in my agenda for next monday to try to find it again.

2 Likes
#7

Don’t bother I finally got it figured out. Perhaps not the easiest way but it is totally working. I used inject code extension to automatically insert the js into the website when it loads. Yeah! I’ve implemented SpaceMouse control for SmartBuild.

offset = new THREE.Vector3();
// so camera.up is the orbit axis
quat = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 1, 0));
quatInverse = quat.clone().invert();
lastPosition = new THREE.Vector3();
lastQuaternion = new THREE.Quaternion();
spherical = new THREE.Spherical();
sphericalDelta = new THREE.Spherical();

function rotate(angle, anglez) {
  angle = angle * Math.PI / 180
  anglez = anglez * Math.PI / 180
  var position = camera.position;
  offset.copy(position).sub(controls.target);
  // rotate offset to "y-axis-is-up" space
  offset.applyQuaternion(quat);
  // angle from z-axis around y-axis
  spherical.setFromVector3(offset);
  spherical.theta -= angle;
  spherical.phi -= anglez;
  // restrict theta to be between desired limits
  spherical.theta = Math.max(controls.minAzimuthAngle, Math.min(controls.maxAzimuthAngle, spherical.theta));
  // restrict phi to be between desired limits
  spherical.phi = Math.max(controls.minPolarAngle, Math.min(controls.maxPolarAngle, spherical.phi));

  spherical.makeSafe();
  //scope.target.add(panOffset);
  offset.setFromSpherical(spherical);
  // rotate offset back to "camera-up-vector-is-up" space
  offset.applyQuaternion(quatInverse);
  camera.position.copy(controls.target).add(offset);
  controls.update();
}

function pan(delta) {
  var element = controls.domElement === document ? controls.domElement.body : controls.domElement;
  var position = camera.position;
  offset.copy(position).sub(controls.target);
  var targetDistance = offset.length();
  // half of the fov is center to top of screen
  targetDistance *= Math.tan((camera.fov / 2) * Math.PI / 180.0);
  distance = 2 * delta * targetDistance / element.clientHeight
  var v = new THREE.Vector3();
  v.setFromMatrixColumn(camera.matrix, 0); // get x column of objectMatrix
  v.multiplyScalar(distance);
  controls.target.add(v);
  camera.position.add(v);
}

function updateController() {
  if(document.hasFocus()) {
    gamepad = navigator.getGamepads()[1]
    if (gamepad === null || typeof controls == 'undefined' || typeof camera == 'undefined') {
      requestAnimationFrame(updateController);
      return;
    }
    axes = gamepad.axes
    pan_lr_delta = axes[0] * 100;
    pan_ud_delta = axes[2] * 5;
    zoom_delta = axes[1] * 25;
    rotate_ud_delta = axes[3] * 10;
    rotate_lr_delta = axes[4] * 10;
    orbit_delta = axes[5] * 20;

    //Set the camera target and position
    camera_direction = new THREE.Vector3();
    camera_direction.subVectors(camera.position, controls.target);
    distance = camera_direction.length();
    distance_factor = (distance / 100) + 0.1
    //zoom
    if (zoom_delta !== 0){
      camera_direction.setLength(0 - (distance_factor * zoom_delta));

      camera.position.add(camera_direction);
      if (distance < 10 && zoom_delta > 0) controls.target.add(camera_direction);
    }
    //up and down pan
    if (pan_ud_delta !== 0) {
      controls.target.z += pan_ud_delta * distance_factor;
      camera.position.z += pan_ud_delta * distance_factor;
    }
    //pan left / right
    if (pan_lr_delta !== 0) pan(0 - pan_lr_delta);
    //ORBIT
    if (orbit_delta !== 0 || rotate_ud_delta != 0) rotate(0 - orbit_delta, rotate_ud_delta);
    controls.update();
  }
  requestAnimationFrame(updateController);
}
updateController();

Now if SketchUp would expose their camera the same thing could be done in SketchUp Web.

https://dl.dropboxusercontent.com/s/4mkgk1kchz5qopd/SpaceMouse.gif?raw=1(image larger than 5120KB)

1 Like
#8

As cool as that is doesn’t that defeat the whole purpose of the variable input? :wink:

#9

Sure :smile:
But my goal was to control a toy tower crane with the space mouse.

It was at the beginning of the pandemic when my son said that he was unable to play with his crane, since Kraanman (dutch for crane operator) was unable to come to work, since “all mommies and dads” needed to work from home… so I picked up some laying around parts and made the guy’s crane remote controlled…

In the end the relay board got hooked up to a raspberry pi running an asp.net core webservice + a video streaming service and a react.js frontend. So that the laptop could use that frontend to communicate with the backend services and the spacemouse. And, correct as you say, I did not take into account the variable input. Instead of using a relay board, feeding some mosfets with a pwm signal based on the variable input… would be better. Maybe next time :grin:

Now, other than that… we are waiting for ages now, for a SketchUp web API…

5 Likes
SketchUp for Web API(s) - what, when, how?
#10

I would give you two likes if I could :slight_smile:

2 Likes
#11

How did you do the calibration (e.g. find the factors to multiply with the gamepad axes signals)?

I suppose that it varies from device to device and that might be the reason why their hackathon project did not find its way into the product.

Also it would be code that depends on a product that is controlled by another company (3dconnexion) who might introduce changes or release new devices that work slightly differently so that it is hard for SketchUp to ensure a consistent experience.

#12

I played around till it felt right. I imagine ‘real support’ would need to allow the user to set the sensitivity, as well as allow the option to reverse the direction, as I has to do for some of the axes.

Not really. Gamepad API is universal. If they made the axis customizable so the end user could select which axes controls what function, any gamepad device could be used, not just the SpaceMouse. Settings would of course need to be per device id, in case the user has multiple devices.

There are really only three things that could change.

  1. axes sensitivity.
  2. axes direction.
  3. order of axes.
2 Likes
#13

True! Also, why I think SketchUp for Web could provide so much additional value by supporting 3 axis controllers (any controller!). It could even be a unique selling point which makes SketchUp Web (within the Studio subscription) more attractive than Pro. Isn’t that what everone says: “What do I want with all the extra stuff in Studio if Pro has all I need?”

I was thinking of setting reasonable defaults (without burdening users with too much GUI), which is hard when there are differences from device to device.

1 Like
#14

That is true. I would expect some defaults for the most common devices.