Added FOV parameter to scene

Wisc-HCI · Sep 3, 2021 · 71445e1 · 71445e1
1 parent 4dc6682
commit 71445e1
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 5 deletions.
diff --git a/dist/Content.js b/dist/Content.js
@@ -106,11 +106,14 @@ function Content(props) {
       backgroundColor = props.backgroundColor,
       planeColor = props.planeColor,
       highlightColor = props.highlightColor,
-      plane = props.plane;
+      plane = props.plane,
+      fov = props.fov;
   var camera = (0, _fiber.useThree)(function (state) {
     return state.camera;
   });
   camera.up.set(0, 0, 1);
+  camera.fov = fov ? fov : 60;
+  camera.updateProjectionMatrix();
 
   var _useSceneStore = (0, _SceneStore.default)(function (state) {
     var reducedTfs = Object.entries(state.tfs).map(function (pair) {

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -135,4 +135,4 @@
 
 
 
-              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.0904ee00.iframe.bundle.js"></script><script src="vendors~main.146e3d4e.iframe.bundle.js"></script><script src="main.34b71dbe.iframe.bundle.js"></script></body></html>
+              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.0904ee00.iframe.bundle.js"></script><script src="vendors~main.146e3d4e.iframe.bundle.js"></script><script src="main.2a8c734b.iframe.bundle.js"></script></body></html>
diff --git a/docs/main.34b71dbe.iframe.bundle.js → docs/main.2a8c734b.iframe.bundle.js b/docs/main.34b71dbe.iframe.bundle.js → docs/main.2a8c734b.iframe.bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "robot-scene",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "dist/index.js",
   "private": false,
   "files": [

diff --git a/src/components/Content.jsx b/src/components/Content.jsx
@@ -43,11 +43,13 @@ export default function Content(props) {
 
   const { displayTfs, displayGrid, isPolar, 
           backgroundColor, planeColor, 
-          highlightColor, plane } = props;
+          highlightColor, plane, fov } = props;
 
   const camera = useThree((state) => state.camera);
 
   camera.up.set(0,0,1);
+  camera.fov = fov ? fov : 60;
+  camera.updateProjectionMatrix();
 
   const [tfs, items, lines, hulls] = useSceneStore(state => {
 

diff --git a/src/stories/Scene.stories.js b/src/stories/Scene.stories.js
@@ -167,6 +167,7 @@ RandomShapes.args = {
     planeColor: '#a8a8a8',
     highlightColor: '#ffffff',
     plane: -0.75,
+    fov: 60,
     onPointerMissed: () => console.log('Missed Click')
 }
 export const EvD = Template.bind({});
@@ -662,6 +663,7 @@ EvD.args = {
     planeColor: '#141414',
     highlightColor: '#ffffff',
     plane: -0.75,
+    fov: 60,
     onPointerMissed: () => console.log('Missed Click')
 }
 export const Movement = Template.bind({});
@@ -755,6 +757,7 @@ Movement.args = {
     planeColor: '#a8a8a8',
     highlightColor: '#ffffff',
     plane: -0.75,
+    fov: 60,
     onPointerMissed: () => console.log('Missed Click')
 }
 
@@ -810,6 +813,7 @@ MeshDebugging.args = {
     planeColor: '#a8a8a8',
     highlightColor: '#ffffff',
     plane: -0.75,
+    fov: 60,
     onPointerMissed: () => console.log('Missed Click')
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -135,4 +135,4 @@



		window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.0904ee00.iframe.bundle.js"></script><script src="vendors~main.146e3d4e.iframe.bundle.js"></script><script src="main.34b71dbe.iframe.bundle.js"></script></body></html>
		window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.0904ee00.iframe.bundle.js"></script><script src="vendors~main.146e3d4e.iframe.bundle.js"></script><script src="main.2a8c734b.iframe.bundle.js"></script></body></html>