mirror of
https://github.com/nerfstudio-project/nerfstudio.git
synced 2026-11-14 20:03:49 +08:00
Terrance/viewer cam controls (#486)
* add wasd controls to camera, spacebar to reset target * reverting zoom pan speed * adding keyboard camera controls * fixing dependencies
This commit is contained in:
Terrance Wang authored and 
GitHub committed
1 parent
21ebaceed1
commit
b64391354b
5 files changed
+7136
-6981
No files matched your search
Generated
+15
-25
@@ -19,7 +19,7 @@
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^14.2.0",
|
||||
"ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
|
||||
"camera-controls": "^1.37.2",
|
||||
"classnames": "^2.3.1",
|
||||
"dat.gui": "^0.7.9",
|
||||
"dayjs": "^1.11.5",
|
||||
@@ -40,7 +40,6 @@
|
||||
"socket.io-client": "^4.5.1",
|
||||
"stats.js": "^0.17.0",
|
||||
"three": "^0.142.0",
|
||||
"three-css2drender": "^1.0.0",
|
||||
"three-wtm": "^1.0",
|
||||
"websocket": "^1.0.34",
|
||||
"wwobjloader2": "^4.0"
|
||||
@@ -6593,6 +6592,14 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/camera-controls": {
|
||||
"version": "1.37.2",
|
||||
"resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-1.37.2.tgz",
|
||||
"integrity": "sha512-b+8DYJc/honm3b/PzjTQbVjsnkdgiDnI44/PRAWKlLhF0lzggGtaU9ZSGRM/lll2HkF0KN+OHx/ZN80wJmEbqA==",
|
||||
"peerDependencies": {
|
||||
"three": ">=0.126.1"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
@@ -6632,11 +6639,6 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/ccapture.js": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "git+ssh://git@github.com/aceslowman/ccapture.js.git#98b8046970c2bfbb25f749e732f196e15c3486fd",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@@ -17491,14 +17493,6 @@
|
||||
"integrity": "sha512-ESjPO+3geFr+ZUfVMpMnF/eVU2uJPOh0e2ZpMFqjNca1wApS9lJb7E4MjwGIczgt9iuKd8PEm6Pfgp2bJ92Xtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/three-css2drender": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/three-css2drender/-/three-css2drender-1.0.0.tgz",
|
||||
"integrity": "sha512-redDCSBDvgxiJIm6EDT8WO5WJTVg5gUEy/vjtAgJa/zX4peEUnZ8K+mXo6v94EudbnuI5h48/hQo9NExf04ENg==",
|
||||
"peerDependencies": {
|
||||
"three": ">= 0.91"
|
||||
}
|
||||
},
|
||||
"node_modules/three-wtm": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/three-wtm/-/three-wtm-1.0.2.tgz",
|
||||
@@ -23245,6 +23239,12 @@
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true
|
||||
},
|
||||
"camera-controls": {
|
||||
"version": "1.37.2",
|
||||
"resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-1.37.2.tgz",
|
||||
"integrity": "sha512-b+8DYJc/honm3b/PzjTQbVjsnkdgiDnI44/PRAWKlLhF0lzggGtaU9ZSGRM/lll2HkF0KN+OHx/ZN80wJmEbqA==",
|
||||
"requires": {}
|
||||
},
|
||||
"caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
@@ -23268,10 +23268,6 @@
|
||||
"integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
|
||||
"dev": true
|
||||
},
|
||||
"ccapture.js": {
|
||||
"version": "git+ssh://git@github.com/aceslowman/ccapture.js.git#98b8046970c2bfbb25f749e732f196e15c3486fd",
|
||||
"from": "ccapture.js@github:aceslowman/ccapture.js#npm-fix"
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
@@ -30577,12 +30573,6 @@
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.142.0.tgz",
|
||||
"integrity": "sha512-ESjPO+3geFr+ZUfVMpMnF/eVU2uJPOh0e2ZpMFqjNca1wApS9lJb7E4MjwGIczgt9iuKd8PEm6Pfgp2bJ92Xtg=="
|
||||
},
|
||||
"three-css2drender": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/three-css2drender/-/three-css2drender-1.0.0.tgz",
|
||||
"integrity": "sha512-redDCSBDvgxiJIm6EDT8WO5WJTVg5gUEy/vjtAgJa/zX4peEUnZ8K+mXo6v94EudbnuI5h48/hQo9NExf04ENg==",
|
||||
"requires": {}
|
||||
},
|
||||
"three-wtm": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/three-wtm/-/three-wtm-1.0.2.tgz",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^14.2.0",
|
||||
"ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
|
||||
"camera-controls": "^1.37.2",
|
||||
"classnames": "^2.3.1",
|
||||
"dat.gui": "^0.7.9",
|
||||
"dayjs": "^1.11.5",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
import CameraControls from 'camera-controls';
|
||||
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
|
||||
|
||||
import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
|
||||
@@ -20,6 +20,7 @@ const SCENE_BOUNDS_NAME = 'Scene Bounds';
|
||||
const CAMERAS_NAME = 'Training Cameras';
|
||||
|
||||
export function get_scene_tree() {
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const sceneTree = new SceneNode(scene);
|
||||
|
||||
@@ -61,15 +62,54 @@ export function get_scene_tree() {
|
||||
sceneTree.metadata.labelRenderer = labelRenderer;
|
||||
|
||||
// Camera Controls
|
||||
const camera_controls = new OrbitControls(main_camera, renderer.domElement);
|
||||
camera_controls.rotateSpeed = 2.0;
|
||||
camera_controls.zoomSpeed = 1;
|
||||
camera_controls.panSpeed = 1;
|
||||
camera_controls.target.set(0, 0, 0); // focus point of the controls
|
||||
camera_controls.autoRotate = false;
|
||||
camera_controls.enableDamping = true;
|
||||
camera_controls.dampingFactor = 1.0;
|
||||
CameraControls.install( { THREE } );
|
||||
|
||||
const camera_controls = new CameraControls( main_camera, renderer.domElement);
|
||||
camera_controls.azimuthRotateSpeed = - 0.3; // negative value to invert rotation direction
|
||||
camera_controls.polarRotateSpeed = 0.3; //
|
||||
camera_controls.minDistance = 0.3;
|
||||
camera_controls.maxDistance = 100;
|
||||
|
||||
// camera_controls.dollyToCursor = true;
|
||||
camera_controls.dollySpeed = 0.3;
|
||||
camera_controls.saveState();
|
||||
|
||||
const keyMap = [];
|
||||
|
||||
function moveCamera() {
|
||||
const scaling = Math.max(1, 0.3 * camera_controls.distance);
|
||||
if (keyMap.ArrowLeft === true) { camera_controls.rotate(-.03, 0, true); }
|
||||
if (keyMap.ArrowRight === true) { camera_controls.rotate(.03, 0, true); }
|
||||
if (keyMap.ArrowUp === true) { camera_controls.rotate(0, .01, true); }
|
||||
if (keyMap.ArrowDown === true) { camera_controls.rotate(0, -.01, true); }
|
||||
if (keyMap.KeyD === true) { camera_controls.truck(.02 * scaling, 0, true); }
|
||||
if (keyMap.KeyA === true) { camera_controls.truck(-.02 * scaling, 0, true); }
|
||||
if (keyMap.KeyW === true) { camera_controls.forward(.02 * scaling, true); }
|
||||
if (keyMap.KeyS === true) { camera_controls.forward(-.02 * scaling, true); }
|
||||
if (keyMap.KeyQ === true) { camera_controls.dolly(0.1 * scaling, true); }
|
||||
if (keyMap.KeyE === true) { camera_controls.dolly(-0.1 * scaling, true); }
|
||||
};
|
||||
|
||||
function onKeyUp(event) {
|
||||
const keyCode = event.code;
|
||||
keyMap[keyCode] = false;
|
||||
}
|
||||
function onKeyDown(event) {
|
||||
const keyCode = event.code;
|
||||
keyMap[keyCode] = true;
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", onKeyDown, true);
|
||||
window.addEventListener("keyup", onKeyUp, true);
|
||||
|
||||
window.addEventListener('keydown', event => {
|
||||
if (event.code === 'Space') {
|
||||
camera_controls.setTarget(0, 0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
sceneTree.metadata.camera_controls = camera_controls;
|
||||
sceneTree.metadata.moveCamera = moveCamera;
|
||||
|
||||
// Transform Controls
|
||||
const transform_controls = new TransformControls(
|
||||
|
||||
@@ -199,10 +199,13 @@ export default function ViewerWindow(props) {
|
||||
}, [websocket]);
|
||||
|
||||
const render = () => {
|
||||
requestAnimationFrame(render);
|
||||
const fps = 24
|
||||
const interval = 1000 / fps
|
||||
handleResize();
|
||||
sceneTree.metadata.camera.updateProjectionMatrix();
|
||||
sceneTree.metadata.camera_controls.update();
|
||||
sceneTree.metadata.moveCamera();
|
||||
sceneTree.metadata.camera_controls.update(interval);
|
||||
requestAnimationFrame(render);
|
||||
renderer.render(scene, sceneTree.metadata.camera);
|
||||
labelRenderer.render(scene, sceneTree.metadata.camera);
|
||||
stats.update();
|
||||
|
||||
+7066
-6944
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user