diff --git a/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx b/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
deleted file mode 100644
index e6c7e6d5f..000000000
--- a/nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-
-export default function RenderWindow() {
- const isWebsocketConnected = useSelector(
- (state) => state.websocketState.isConnected,
- );
-
- return (
-
-
-
Renderer Disconnected
-
-
![Render window]()
-
- );
-}
diff --git a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
index 38c6cee0e..7415f09a0 100644
--- a/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
+++ b/nerfstudio/viewer/app/src/modules/ViewerWindow/ViewerWindow.jsx
@@ -12,7 +12,6 @@ import SyncOutlinedIcon from '@mui/icons-material/SyncOutlined';
import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation';
import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBackOutlined';
import { isEqual } from 'lodash';
-import RenderWindow from '../RenderWindow/RenderWindow';
import {
makeThrottledMessageSender,
ViserWebSocketContext,
@@ -187,6 +186,19 @@ export default function ViewerWindow(props) {
// start the three.js rendering loop
// when the DOM is ready
useEffect(() => {
+ document.getElementById("background-image").onload = function () {
+ if (scene) {
+ const oldBackground = scene.background;
+ const texture = new THREE.Texture(this);
+ texture.minFilter = THREE.LinearFilter;
+ texture.magFilter = THREE.NearestFilter;
+ texture.needsUpdate = true;
+ scene.background = texture;
+ if (oldBackground) {
+ oldBackground.dispose();
+ }
+ }
+ }
myRef.current.append(renderer.domElement);
render();
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -203,17 +215,17 @@ export default function ViewerWindow(props) {
let crop_h;
const render_aspect = render_width / render_height;
const viewport_aspect = viewport_width / viewport_height;
- let render_viewport_apsect_ratio = null;
+ let render_viewport_aspect_ratio = null;
if (render_aspect > viewport_aspect) {
// render width is the limiting factor
crop_w = viewport_width;
crop_h = viewport_width / render_aspect;
- render_viewport_apsect_ratio = viewport_aspect / render_aspect;
+ render_viewport_aspect_ratio = viewport_aspect / render_aspect;
} else {
// render height is the limiting factor
crop_w = viewport_height * render_aspect;
crop_h = viewport_height;
- render_viewport_apsect_ratio = 1.0;
+ render_viewport_aspect_ratio = 1.0;
}
let display = null;
@@ -233,7 +245,7 @@ export default function ViewerWindow(props) {
// such that the rendered video will match correctly
if (camera_choice !== 'Main Camera') {
const fl = 1.0 / Math.tan((field_of_view * Math.PI) / 360);
- const fl_new = fl * render_viewport_apsect_ratio;
+ const fl_new = fl * render_viewport_aspect_ratio;
const fov = Math.atan(1 / fl_new) / (Math.PI / 360);
sceneTree.metadata.camera.fov = fov;
} else {
@@ -303,7 +315,17 @@ export default function ViewerWindow(props) {
return (
<>
-
+
+
+
Renderer Disconnected
+
+
+