Orthographic projection for 3D plots - finalist

[archmoj]

Supersedes #3331.
Fixes #2611 by adding orthographic views to Plotly graphs.
A new attribute ortho is defined on the camera object (defaulted to false) and passed to gl-plot3d and gl-axes3d modules.
The scene initialisation now uses the camera initial vectors as well as ortho attribute.
The createCamera function needed in plot/gl3d/scene.js and gl-vis/gl-plot3d is centralised in a separate module (i.e. a fork of 3d-view-controls while applying Plotly.js camera.js latest changes).
Interactive demo.

TODO:

• Fix relayout path to start new scene when switching between orthographic and perspective projections.
• Fix orthographic scales for zoom and save image.
  

@plotly/plotly_js
@jackparmer

[archmoj]

https://github.com/gl-vis/gl-plot3d/compare/ortho-view1

[archmoj]

Also regarding gl-axes3d changes... https://github.com/gl-vis/gl-axes3d/compare/ortho-view1

[etpinard]

@archmoj this is starting to look good! Nice work!

About

• Fix relayout path to start new scene when switching between orthographic and perspective projections.

First you'll need to change the scene.projection.type editType to 'calc' (we could eventually try 'plot' and even 'modebar', but we should start with 'calc'). Then maybe you could try adding some code to

plotly.js/src/plots/gl3d/scene.js

Lines 800 to 842 in 25fa0c2

	proto.updateFx = function(dragmode, hovermode) {
	var camera = this.camera;
	if(camera) {
	// rotate and orbital are synonymous
	if(dragmode === 'orbit') {
	camera.mode = 'orbit';
	camera.keyBindingMode = 'rotate';
	} else if(dragmode === 'turntable') {
	camera.up = [0, 0, 1];
	camera.mode = 'turntable';
	camera.keyBindingMode = 'rotate';
	// The setter for camera.mode animates the transition to z-up,
	// but only if we *don't* explicitly set z-up earlier via the
	// relayout. So push `up` back to layout & fullLayout manually now.
	var gd = this.graphDiv;
	var fullLayout = gd._fullLayout;
	var fullCamera = this.fullSceneLayout.camera;
	var x = fullCamera.up.x;
	var y = fullCamera.up.y;
	var z = fullCamera.up.z;
	// only push `up` back to (full)layout if it's going to change
	if(z / Math.sqrt(x * x + y * y + z * z) > 0.999) return;
	var attr = this.id + '.camera.up';
	var zUp = {x: 0, y: 0, z: 1};
	var edits = {};
	edits[attr] = zUp;
	var layout = gd.layout;
	Registry.call('_storeDirectGUIEdit', layout, fullLayout._preGUI, edits);
	fullCamera.up = zUp;
	Lib.nestedProperty(layout, attr).set(zUp);
	} else {
	// none rotation modes [pan or zoom]
	camera.keyBindingMode = dragmode;
	}
	}
	// to put dragmode and hovermode on the same grounds from relayout
	this.fullSceneLayout.hovermode = hovermode;
	};

to update the projection?

[etpinard]

Awesome work @archmoj !!

Adding this to v1.45.0 - might as well 😄 right?

💃 💃 💃