Skip to content

attempting to implement orthographic camera #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sirrodgepodge wants to merge 7 commits into
base: master
Choose a base branch
from
Open

attempting to implement orthographic camera #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9523324
attempting to implement orthographic camera
sirrodgepodge Apr 29, 2020
a6e1c26
perspective as default
sirrodgepodge Apr 29, 2020
1eaf6f6
updating type def
sirrodgepodge Apr 29, 2020
4d00855
cleaning up copied and pasted
sirrodgepodge May 4, 2020
9a0235f
cleaning up
sirrodgepodge May 4, 2020
9453b59
cleaning up
sirrodgepodge May 4, 2020
38305ff
cleanup errors, adding depth
sirrodgepodge May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Object3D, WebGLRendererParameters, Scene, Camera, WebGLRenderer } from 'three';

export interface ConfigOptions {
cameraType?: 'perspective' | 'orthographic';
controlType?: 'trackball' | 'orbit' | 'fly';
rendererConfig?: WebGLRendererParameters;
waitForLoadComplete?: boolean;
Expand Down
42 changes: 32 additions & 10 deletions src/three-render-objects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
WebGLRenderer,
Scene,
PerspectiveCamera,
OrthographicCamera,
Raycaster,
TextureLoader,
Vector2,
Expand All @@ -26,6 +27,7 @@ const three = window.THREE
WebGLRenderer,
Scene,
PerspectiveCamera,
OrthographicCamera,
Raycaster,
TextureLoader,
Vector2,
Expand Down Expand Up @@ -183,10 +185,12 @@ export default Kapsule({
tbControls: state => state.controls // to be deprecated
},

stateInit: () => ({
stateInit: ({ cameraType = 'perspective' }) => ({
scene: new three.Scene(),
camera: new three.PerspectiveCamera(),
Copy link
Owner

@vasturiano vasturiano Apr 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The camera declaration should remain in stateInit. Otherwise you may run into situations where you try to use it before it's declared, for example by invoking cameraPosition before initialization.

If you need one of the config options you can always get it as input to stateInit:

stateInit: ({ cameraType }) => ({
  camera: /* cameraType logic */
  ...
})

Copy link
Author

@sirrodgepodge sirrodgepodge May 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

clock: new three.Clock()
clock: new three.Clock(),
camera: cameraType === 'perspective' ?
Copy link
Owner

@vasturiano vasturiano May 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this logic if the user specifies anything else other than perspective it will fall back to orthographic, which is a little dangerous. Let's swap that so that perspective is the default fallback:

camera: new three[cameraType === 'orthographic' ? 'OrthographicCamera' : 'PerspectiveCamera']();

new three.PerspectiveCamera() :
new three.OrthographicCamera()
}),

init(domNode, state, { controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) {
Expand Down Expand Up @@ -298,10 +302,10 @@ export default Kapsule({
}

state.renderer.setSize(state.width, state.height);
state.camera.aspect = state.width/state.height;
state.camera.updateProjectionMatrix();

// initialize camera
state.camera.position.z = 1000;
updateCamera(state.camera, state.width, state.height, state.camera.position.z);

// add sky
state.scene.add(state.skysphere = new three.Mesh());
Expand All @@ -317,8 +321,8 @@ export default Kapsule({
state.container.style.width = state.width;
state.container.style.height = state.height;
state.renderer.setSize(state.width, state.height);
state.camera.aspect = state.width/state.height;
state.camera.updateProjectionMatrix();

updateCamera(state.camera, state.width, state.height, state.camera.position.z);
}

if (changedProps.hasOwnProperty('skyRadius') && state.skyRadius) {
Expand Down Expand Up @@ -361,10 +365,28 @@ export default Kapsule({
state.objects.forEach(obj => state.scene.add(obj)); // Add to scene
}

//

function finishLoad() {
state.loadComplete = state.scene.visible = true;
}
}
});
});

const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50;

function updateCamera(camera, width, height, depth) {
Copy link
Owner

@vasturiano vasturiano May 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nit, depth could be extracted from camera.position.z eliminating the need for the additional argument.

if (camera.type === 'PerspectiveCamera') {
camera.aspect = width / height;
} else {
const aspect = width / height;
const height_ortho = depth * 2 * Math.atan(
Copy link
Contributor

@RaulPROP RaulPROP May 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

depth is not defined.

THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2
);
const width_ortho = height_ortho * aspect;

camera.left = width_ortho / -2;
camera.right = width_ortho / 2;
camera.top = height_ortho / 2;
camera.bottom = height_ortho / -2;
}
camera.updateProjectionMatrix();
}