Feature Request: Orthographic projection in Visualizer

[andrewismoody]

https://threejs.org/docs/api/cameras/OrthographicCamera.html

The visualizer makes the gcode lines appear to be incorrect from top-down view. Using the orthographic camera would offer a more accurate visual representation of the gcode.

Very low priority.

[cheton]

Sure! Later I will change perspective camera to orthographic camera as you suggested.

[cheton]

Added in 1.9.0-alpha.5.

You can switch between perspective projection and orthographic projection from 3D view dropdown:

[cheton]

Adding orthographic projection support is much more difficult than I expected. I took me around two weeks to figure out a solution that can smoothly switch between perspective projection and orthographic projection, and eventually I'm able to work it out. 😆

Here are some notes regarding this issue:

How To Fit Camera To Object

http://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object

Viewport

https://github.com/cncjs/cncjs/blob/v1.9.0-alpha.5/src/web/widgets/Visualizer/Viewport.js

Orthographic Projection

http://stackoverflow.com/questions/17558085/three-js-orthographic-camera

const zoom = Math.min(visibleWidth / width, visibleHeight / height);
this.camera.setZoom(zoom);

Perspective Projection

const { x, y, z } = this.camera.position;
const eye = new THREE.Vector3(x, y, z);
const target = new THREE.Vector3(0, 0, 0);
// Find the distance from the camera to the closest face of the object
const distance = target.distanceTo(eye);
// The aspect ratio of the canvas (width / height)
const aspect = visibleHeight > 0 ? (visibleWidth / visibleHeight) : 1;

const fov = Math.max(
    // to fit the viewport height
    2 * Math.atan(height / (2 * distance)) * (180 / Math.PI),
    // to fit the viewport width
    2 * Math.atan((width / aspect) / (2 * distance)) * (180 / Math.PI)
);

this.camera.setFov(Math.max(fov, FOV_MIN));

CombinedCamera with TrackballControls

See mrdoob/three.js#1454

if ( _this.object.inOrthographicMode) {
    var zoom = _this.object.zoom * (2 - factor);
    _this.object.setZoom(zoom);
} else {
    _eye.multiplyScalar( factor );
}

My modified TrackballControls:
https://github.com/cncjs/cncjs/blob/v1.9.0-alpha.5/src/web/widgets/Visualizer/TrackballControls.js

[andrewismoody]

Wow. Well done. Sorry this was so difficult to implement, but your diligence is amazing. I'll definitely give this a try when I start back cutting again. Might be a couple weeks.

[andrewismoody]

I went ahead and installed alpha-5, even though I'm not doing any cutting right now. Orthographic view is perfect. It doesn't look like my cut is spilling over the bounds anymore, and the toolhead position lines up with the actual position better (visually). Great job on this enhancement.