diff --git a/src/ThreeDimensionalCanvas.tsx b/src/ThreeDimensionalCanvas.tsx
index 3daac7bd..38e3dc67 100644
--- a/src/ThreeDimensionalCanvas.tsx
+++ b/src/ThreeDimensionalCanvas.tsx
@@ -4,6 +4,11 @@ import { CameraInitProps } from './types';
 
 export type ThreeDimensionalCanvasProps = {
   children?: React.ReactNode;
+  /**
+   * Whether or not to use an orthographic camera or not
+   * @default false
+   */
+  orthographic?: boolean;
   /**
    * The camera's initial props. overrides the defaults
    * @default { position: [0, 0, 1], zoom: 1, up: [0, 1, 0] }
@@ -14,9 +19,11 @@ export type ThreeDimensionalCanvasProps = {
 export function ThreeDimensionalCanvas({
   children,
   camera,
+  orthographic = false,
 }: ThreeDimensionalCanvasProps) {
   return (
     <Canvas
+      orthographic={orthographic}
       camera={{
         position: [0, 0, 1],
         zoom: 1,
diff --git a/stories/ColorByData.stories.tsx b/stories/ColorByData.stories.tsx
index 58f8dcce..ab5e3950 100644
--- a/stories/ColorByData.stories.tsx
+++ b/stories/ColorByData.stories.tsx
@@ -7,7 +7,7 @@ import {
   Points,
 } from '../src';
 import { Container } from './components';
-import data from './data/point-cloud-3d.json';
+import _data from './data/point-cloud-3d.json';
 import { interpolateYlGnBu } from 'd3-scale-chromatic';
 
 const meta: Meta = {
@@ -32,6 +32,10 @@ const meta: Meta = {
 
 export default meta;
 
+const data = _data.map((d) => ({
+  ...d,
+  metaData: { actualLabel: String(Math.floor(Math.random() * 50)) },
+}));
 const actualLabelsSet = data.reduce(
   (acc, d) => acc.add(d.metaData.actualLabel),
   new Set()