1

I have a PlaneGeometry & mesh, extent is X,Y, normal is Z-axis And a camera centered above that plane looking down from +Z axis. (basically looking down a the plane which is a topo/terrain map)

By default, OrbitControls will rotate the view around the X & Y axis. (which is fairly useless in this case)

What [mostly] works is the rotate the scene around the X-axis scene.rotateX(-Math.PI/2) and then drive the camera/view to be above the Z-axis. After that, OrbitControls do the right thing:

  • vertical mouse tilts the view down to (or up from) the plane
  • horizontal mouse spins the plane around the z-axis (so can see from the other direction)

Two 'problems':

  1. Is there an API to set the OrbitControl to be above the Z-axis? (after scene.rotateX, the view is at elevation 0, looking across the plane) I'd like to rotate the camera/view to above the Z-axis at altitude.

  2. Is there an alternative way to get OrbitControls to select which axis to rotate? (so without the scene.rotateX, the camera is in the right place)

There's a related fiddle (ignore the SpotLight): https://jsfiddle.net/4azo5bvf/65/

Edit:

const camera = new THREE.PerspectiveCamera( 60, w/h, 0.1, 100 );
camera.position.set(0, 0, 50);
camera.up.set(0, 0, 1);   // <=== spin around Z-axis
const ob_controls = new THREE.OrbitControls(camera, canvas);
Jack Punt
  • 342
  • 1
  • 14
  • Is [this](https://jsfiddle.net/avsy1kte/) you are trying to do? – WestLangley Nov 23 '22 at 03:14
  • YES! That has the correct effect! For the record: WestLangly replaced scene.rotateX(...); with: camera.up.set(0, 0, 1); I thank you. [is there a theory/docs for how/why that works? ] – Jack Punt Nov 23 '22 at 03:46
  • You must add the code in the question. Links to external resources tend to break or the content may change. Read [What topics can I ask about here?](https://stackoverflow.com/help/on-topic): *"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error **and the shortest code necessary to reproduce it in the question itself**."* – Rabbid76 Nov 23 '22 at 05:43
  • @Rabbid76, I appreciate your concern. The demo code is extensive (to set up scene, camera, material, mesh, light..) The *essence* is just the code as given: How to tell OrbitControl to spin Z-axis? camera.up.set(0,0,1); – Jack Punt Nov 23 '22 at 17:31
  • @WestLangley, will you provide an 'answer'? so we can mark it solved? – Jack Punt Nov 23 '22 at 22:07

1 Answers1

0

So we can mark this as 'answered' (thanks to @WestLangley) The easy solution is to use camera.up.set(0, 0, 1) Apparently, OrbitControls uses that to determine the rotatonal/axial orientation.

const camera = new THREE.PerspectiveCamera( 60, w/h, 0.1, 100 );
camera.position.set(0, 0, 50);
camera.up.set(0, 0, 1);   // <=== spin around Z-axis
const ob_controls = new THREE.OrbitControls(camera, canvas);

After further review (and TerekC's answer in Three.JS rotate projection so that the y axis becomes the z-axis) changed to use:

THREE.Object3D.DefaultUp.set(0, 0, 1); // Z-axis up, and spinable
Jack Punt
  • 342
  • 1
  • 14