From 9523324f6be9d18bf264fc661fd956664f54832a Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Tue, 28 Apr 2020 23:15:47 -0400 Subject: [PATCH 1/7] attempting to implement orthographic camera --- src/three-render-objects.js | 45 ++++++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/src/three-render-objects.js b/src/three-render-objects.js index 6ffc166..17a18fa 100644 --- a/src/three-render-objects.js +++ b/src/three-render-objects.js @@ -2,6 +2,7 @@ import { WebGLRenderer, Scene, PerspectiveCamera, + OrthographicCamera, Raycaster, TextureLoader, Vector2, @@ -26,6 +27,7 @@ const three = window.THREE WebGLRenderer, Scene, PerspectiveCamera, + OrthographicCamera, Raycaster, TextureLoader, Vector2, @@ -55,6 +57,9 @@ import TWEEN from '@tweenjs/tween.js'; import accessorFn from 'accessor-fn'; import Kapsule from 'kapsule'; +const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50; +const THREE_JS_PERSPECTIVE_CAMERA_NEAR_DEFAULT = 0.1; + export default Kapsule({ props: { width: { default: window.innerWidth, onChange(width, state, prevWidth) { isNaN(width) && (state.width = prevWidth) } }, @@ -185,11 +190,10 @@ export default Kapsule({ stateInit: () => ({ scene: new three.Scene(), - camera: new three.PerspectiveCamera(), clock: new three.Clock() }), - init(domNode, state, { controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) { + init(domNode, state, { cameraType = 'orthographic', controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) { // Wipe DOM domNode.innerHTML = ''; @@ -263,6 +267,10 @@ export default Kapsule({ }, false); // Setup renderer, camera and controls + state._cameraType = cameraType; + state.camera = state._cameraType === 'perspective' ? + new three.PerspectiveCamera() : + new three.OrthographicCamera(); state.renderer = new three.WebGLRenderer(Object.assign({ antialias: true, alpha: true }, rendererConfig)); state.renderer.setPixelRatio(window.devicePixelRatio); @@ -298,7 +306,23 @@ export default Kapsule({ } state.renderer.setSize(state.width, state.height); - state.camera.aspect = state.width/state.height; + + if (state._cameraType === 'perspective') { + state.camera.aspect = state.width/state.height; + } else { + const aspect = state.width / state.height; + const height_ortho = depth * 2 * Math.atan( + THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2 + ); + const width_ortho = height_ortho * aspect; + + state.camera.left = width_ortho / -2; + state.camera.right = width_ortho / 2; + state.camera.top = height_ortho / 2; + state.camera.bottom = height_ortho / -2; + state.camera.near = THREE_JS_PERSPECTIVE_CAMERA_NEAR_DEFAULT; + } + state.camera.updateProjectionMatrix(); state.camera.position.z = 1000; @@ -318,6 +342,21 @@ export default Kapsule({ state.container.style.height = state.height; state.renderer.setSize(state.width, state.height); state.camera.aspect = state.width/state.height; + + if (state._cameraType === 'perspective') { + state.camera.aspect = state.width/state.height; + } else { + const aspect = state.width / state.height; + const height_ortho = depth * 2 * Math.atan( + THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2 + ); + const width_ortho = height_ortho * aspect; + + state.camera.left = width_ortho / -2; + state.camera.right = width_ortho / 2; + state.camera.top = height_ortho / 2; + state.camera.bottom = height_ortho / -2; + } state.camera.updateProjectionMatrix(); } From a6e1c262cb6e77f7191a3bc974ae6f5dd278343a Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Wed, 29 Apr 2020 07:24:01 -0400 Subject: [PATCH 2/7] perspective as default --- src/three-render-objects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/three-render-objects.js b/src/three-render-objects.js index 17a18fa..d64ab16 100644 --- a/src/three-render-objects.js +++ b/src/three-render-objects.js @@ -193,7 +193,7 @@ export default Kapsule({ clock: new three.Clock() }), - init(domNode, state, { cameraType = 'orthographic', controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) { + init(domNode, state, { cameraType = 'perspective', controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) { // Wipe DOM domNode.innerHTML = ''; From 1eaf6f6ec571473350c038fb764e1fb1ca45f205 Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Wed, 29 Apr 2020 14:23:19 -0400 Subject: [PATCH 3/7] updating type def --- src/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.d.ts b/src/index.d.ts index 9c090ae..2e02283 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -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; From 4d00855d31fea9cea708ed51b3d7b551a2e41e7a Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Sun, 3 May 2020 21:53:25 -0400 Subject: [PATCH 4/7] cleaning up copied and pasted --- src/three-render-objects.js | 69 ++++++++++++++++--------------------- 1 file changed, 29 insertions(+), 40 deletions(-) diff --git a/src/three-render-objects.js b/src/three-render-objects.js index d64ab16..b3b58e1 100644 --- a/src/three-render-objects.js +++ b/src/three-render-objects.js @@ -188,12 +188,15 @@ export default Kapsule({ tbControls: state => state.controls // to be deprecated }, - stateInit: () => ({ + stateInit: ({ cameraType = 'perspective' }) => ({ scene: new three.Scene(), - clock: new three.Clock() + clock: new three.Clock(), + camera: cameraType === 'perspective' ? + new three.PerspectiveCamera() : + new three.OrthographicCamera() }), - init(domNode, state, { cameraType = 'perspective', controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) { + init(domNode, state, { controlType = 'trackball', rendererConfig = {}, waitForLoadComplete = true }) { // Wipe DOM domNode.innerHTML = ''; @@ -267,10 +270,6 @@ export default Kapsule({ }, false); // Setup renderer, camera and controls - state._cameraType = cameraType; - state.camera = state._cameraType === 'perspective' ? - new three.PerspectiveCamera() : - new three.OrthographicCamera(); state.renderer = new three.WebGLRenderer(Object.assign({ antialias: true, alpha: true }, rendererConfig)); state.renderer.setPixelRatio(window.devicePixelRatio); @@ -307,25 +306,12 @@ export default Kapsule({ state.renderer.setSize(state.width, state.height); - if (state._cameraType === 'perspective') { - state.camera.aspect = state.width/state.height; - } else { - const aspect = state.width / state.height; - const height_ortho = depth * 2 * Math.atan( - THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2 - ); - const width_ortho = height_ortho * aspect; - - state.camera.left = width_ortho / -2; - state.camera.right = width_ortho / 2; - state.camera.top = height_ortho / 2; - state.camera.bottom = height_ortho / -2; + // initialize camera + if (state.camera.type === 'OrthographicCamera') { state.camera.near = THREE_JS_PERSPECTIVE_CAMERA_NEAR_DEFAULT; } - - state.camera.updateProjectionMatrix(); - state.camera.position.z = 1000; + updateCamera(state.camera); // add sky state.scene.add(state.skysphere = new three.Mesh()); @@ -341,23 +327,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; - - if (state._cameraType === 'perspective') { - state.camera.aspect = state.width/state.height; - } else { - const aspect = state.width / state.height; - const height_ortho = depth * 2 * Math.atan( - THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2 - ); - const width_ortho = height_ortho * aspect; - state.camera.left = width_ortho / -2; - state.camera.right = width_ortho / 2; - state.camera.top = height_ortho / 2; - state.camera.bottom = height_ortho / -2; - } - state.camera.updateProjectionMatrix(); + updateCamera(state.camera); } if (changedProps.hasOwnProperty('skyRadius') && state.skyRadius) { @@ -406,4 +377,22 @@ export default Kapsule({ state.loadComplete = state.scene.visible = true; } } -}); \ No newline at end of file +}); + +function updateCamera(camera) { + if (camera.type === 'PerspectiveCamera') { + state.camera.aspect = state.width/state.height; + } else { + const aspect = state.width / state.height; + const height_ortho = depth * 2 * Math.atan( + THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2 + ); + const width_ortho = height_ortho * aspect; + + state.camera.left = width_ortho / -2; + state.camera.right = width_ortho / 2; + state.camera.top = height_ortho / 2; + state.camera.bottom = height_ortho / -2; + } + state.camera.updateProjectionMatrix(); +} From 9a0235fbb7dcff5f93301ae9347035f8d9573b09 Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Sun, 3 May 2020 21:59:57 -0400 Subject: [PATCH 5/7] cleaning up --- src/three-render-objects.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/three-render-objects.js b/src/three-render-objects.js index b3b58e1..711d9a4 100644 --- a/src/three-render-objects.js +++ b/src/three-render-objects.js @@ -57,9 +57,6 @@ import TWEEN from '@tweenjs/tween.js'; import accessorFn from 'accessor-fn'; import Kapsule from 'kapsule'; -const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50; -const THREE_JS_PERSPECTIVE_CAMERA_NEAR_DEFAULT = 0.1; - export default Kapsule({ props: { width: { default: window.innerWidth, onChange(width, state, prevWidth) { isNaN(width) && (state.width = prevWidth) } }, @@ -307,9 +304,6 @@ export default Kapsule({ state.renderer.setSize(state.width, state.height); // initialize camera - if (state.camera.type === 'OrthographicCamera') { - state.camera.near = THREE_JS_PERSPECTIVE_CAMERA_NEAR_DEFAULT; - } state.camera.position.z = 1000; updateCamera(state.camera); @@ -371,14 +365,14 @@ 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) { if (camera.type === 'PerspectiveCamera') { state.camera.aspect = state.width/state.height; From 9453b59c3602ddfca293f35be3e3e3353a49aaee Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Sun, 3 May 2020 22:01:24 -0400 Subject: [PATCH 6/7] cleaning up --- src/three-render-objects.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/three-render-objects.js b/src/three-render-objects.js index 711d9a4..f5b16e7 100644 --- a/src/three-render-objects.js +++ b/src/three-render-objects.js @@ -375,7 +375,7 @@ const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50; function updateCamera(camera) { if (camera.type === 'PerspectiveCamera') { - state.camera.aspect = state.width/state.height; + state.camera.aspect = state.width / state.height; } else { const aspect = state.width / state.height; const height_ortho = depth * 2 * Math.atan( From 38305ff5fc8aff0dba3600a635a032a8049e09ee Mon Sep 17 00:00:00 2001 From: sirrodgepodge Date: Mon, 4 May 2020 10:59:48 -0400 Subject: [PATCH 7/7] cleanup errors, adding depth --- src/three-render-objects.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/three-render-objects.js b/src/three-render-objects.js index f5b16e7..2036cf6 100644 --- a/src/three-render-objects.js +++ b/src/three-render-objects.js @@ -305,7 +305,7 @@ export default Kapsule({ // initialize camera state.camera.position.z = 1000; - updateCamera(state.camera); + updateCamera(state.camera, state.width, state.height, state.camera.position.z); // add sky state.scene.add(state.skysphere = new three.Mesh()); @@ -322,7 +322,7 @@ export default Kapsule({ state.container.style.height = state.height; state.renderer.setSize(state.width, state.height); - updateCamera(state.camera); + updateCamera(state.camera, state.width, state.height, state.camera.position.z); } if (changedProps.hasOwnProperty('skyRadius') && state.skyRadius) { @@ -373,20 +373,20 @@ export default Kapsule({ const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50; -function updateCamera(camera) { +function updateCamera(camera, width, height, depth) { if (camera.type === 'PerspectiveCamera') { - state.camera.aspect = state.width / state.height; + camera.aspect = width / height; } else { - const aspect = state.width / state.height; + const aspect = width / height; const height_ortho = depth * 2 * Math.atan( THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT * (Math.PI / 180) / 2 ); const width_ortho = height_ortho * aspect; - state.camera.left = width_ortho / -2; - state.camera.right = width_ortho / 2; - state.camera.top = height_ortho / 2; - state.camera.bottom = height_ortho / -2; + camera.left = width_ortho / -2; + camera.right = width_ortho / 2; + camera.top = height_ortho / 2; + camera.bottom = height_ortho / -2; } - state.camera.updateProjectionMatrix(); + camera.updateProjectionMatrix(); }