diff --git a/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx b/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx index 8ad2bc5d76..dd0d36fc63 100644 --- a/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx +++ b/nerfstudio/viewer/app/src/modules/Scene/Scene.jsx @@ -253,7 +253,12 @@ export function get_scene_tree() { mouseVector.x = 2 * (e.clientX / size.x) - 1; mouseVector.y = 1 - 2 * ((e.clientY - BANNER_HEIGHT) / size.y); - if (mouseVector.x > 1 || mouseVector.x < -1 || mouseVector.y > 1 || mouseVector.y < -1) { + if ( + mouseVector.x > 1 || + mouseVector.x < -1 || + mouseVector.y > 1 || + mouseVector.y < -1 + ) { if (selectedCam !== null) { selectedCam.material.color = new THREE.Color(1, 1, 1); selectedCam = null; @@ -268,7 +273,9 @@ export function get_scene_tree() { selectedCam.material.color = new THREE.Color(1, 1, 1); selectedCam = null; } - const filtered_intersections = intersections.filter(isect => checkVisibility(isect.object)); + const filtered_intersections = intersections.filter((isect) => + checkVisibility(isect.object), + ); if (filtered_intersections.length > 0) { selectedCam = filtered_intersections[0].object; selectedCam.material.color = new THREE.Color(0xfab300); diff --git a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx index 948e166f41..3a50feb126 100644 --- a/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx +++ b/nerfstudio/viewer/app/src/modules/SidePanel/CameraPanel/CameraPanel.jsx @@ -423,14 +423,27 @@ export default function CameraPanel(props) { }); } + const keyframes = []; + for (let i = 0; i < cameras.length; i += 1) { + const camera = cameras[i]; + keyframes.push({ + matrix: JSON.stringify(camera.matrix.toArray()), + fov: camera.fov, + aspect: camera_render.aspect, + }); + } + // const myData const camera_path_object = { - keyframes: [], + keyframes, render_height, render_width, camera_path, fps, seconds, + smoothness_value, + is_cycle, + is_linear, }; return camera_path_object; }; @@ -461,6 +474,58 @@ export default function CameraPanel(props) { URL.revokeObjectURL(href); }; + const load_camera_path = (camera_path_object) => { + // TODO UI for getting json + + const new_camera_list = []; + + setRenderHeight(camera_path_object.render_height); + setUIRenderHeight(camera_path_object.render_height); + setRenderWidth(camera_path_object.render_width); + setUIRenderWidth(camera_path_object.render_width); + + setFps(camera_path_object.fps); + setUIfps(camera_path_object.fps); + + setSeconds(camera_path_object.seconds); + setUISeconds(camera_path_object.seconds); + + set_smoothness_value(camera_path_object.smoothness_value); + setIsCycle(camera_path_object.is_cycle); + setIsLinear(camera_path_object.is_linear); + + for (let i = 0; i < camera_path_object.keyframes.length; i += 1) { + const keyframe = camera_path_object.keyframes[i]; + const camera = new THREE.PerspectiveCamera( + keyframe.fov, + keyframe.aspect, + 0.1, + 1000, + ); + + const mat = new THREE.Matrix4(); + mat.fromArray(JSON.parse(keyframe.matrix)); + // camera.matrix = mat; + set_camera_position(camera, mat); + new_camera_list.push(camera); + } + + setCameras(new_camera_list); + reset_slider_render_on_add(new_camera_list); + }; + + const uploadCameraPath = (e) => { + const fileUpload = e.target.files[0]; + + const fr = new FileReader(); + fr.onload = (res) => { + const camera_path_object = JSON.parse(res.target.result); + load_camera_path(camera_path_object); + }; + + fr.readAsText(fileUpload); + }; + const copy_cmd_to_clipboard = () => { console.log('copy_cmd_to_clipboard'); @@ -543,6 +608,23 @@ export default function CameraPanel(props) { Export Path +
+ +