Skip to content

Commit

Permalink
Update box position, dataset URL and camera view controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctwhome
ctwhome committed Mar 18, 2024
1 parent 8f5f4aa commit fecf694
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 71 deletions.
6 changes: 3 additions & 3 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
// url: 'https://s3.ctwhome.com/ruisdael/data/animated-data/ql.zarr'
// },
{
title: 'Localhost (Dev) Dataset with Rain 3 (600MB)',
title: 'Localhost (Dev) Dataset (600MB)',
description: 'Rain and clouds',
image: `${base}/images/cover.webp`,
url: 'http://localhost:5173/data/movie.zarr'
Expand All @@ -25,7 +25,7 @@
title: 'Dataset with Rain 3 (600MB)',
description: 'Rain and clouds',
image: `${base}/images/cover.webp`,
url: 'https://storage.googleapis.com/ruisdael/movie.zarr'
url: 'https://s3.ctwhome.com/ruisdael/data/movie.zarr'
}
];
</script>
Expand Down Expand Up @@ -58,7 +58,7 @@
<img src={data.image} class="flex-none rounded-t-2xl" alt="Shoes" />
<div class="card-body">
<h2 class="card-title">{data.title}</h2>
<p>If a dog chews shoes whose shoes does he choose?</p>
<!-- <p>If a dog chews shoes whose shoes does he choose?</p> -->
<div class="card-actions justify-end">
<button class="btn btn-primary btn-sm">Load 3D data</button>
</div>
Expand Down
96 changes: 48 additions & 48 deletions src/routes/viewer/components/DebugButtons.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,53 @@
<script>
import * as THREE from 'three';
import { cameraControls } from '../sceneSetup/create3DScene';
import { camera, cameraControls } from '../sceneSetup/create3DScene';
const distance = 50; // Adjust the distance based on your scene scale
export let camera;
// More examples here
// Function to update camera position and look at the center of the cube
function setCameraView(x, y, z, u = 0, v = -1, w = 0, animate = true) {
camera.up.set(u, v, w); // This keeps the camera oriented with the world's up direction
cameraControls.setPosition(x, y, z, animate);
camera.lookAt(0, 0, 0); // Assuming the cube is at the origin
}
</script>

<div class="info p-6">
<button class="btn btn-sm" on:click={() => cameraControls.rotate(45 * THREE.MathUtils.DEG2RAD, 0, true)}
>rotate theta 45deg</button
>
<button class="btn btn-sm" on:click={() => cameraControls.rotate(-90 * THREE.MathUtils.DEG2RAD, 0, true)}
>rotate theta -90deg</button
>
<button class="btn btn-sm" on:click={() => cameraControls.rotate(360 * THREE.MathUtils.DEG2RAD, 0, true)}
>rotate theta 360deg</button
>
<button class="btn btn-sm" on:click={() => cameraControls.rotate(0, 20 * THREE.MathUtils.DEG2RAD, true)}
>rotate phi 20deg</button
>

<button class="btn btn-sm" on:click={() => cameraControls.truck(1, 0, true)}> truck( 1, 0 ) </button>
<button class="btn btn-sm" on:click={() => cameraControls.truck(0, 1, true)}> truck( 0, 1 ) </button>
<button class="btn btn-sm" on:click={() => cameraControls.truck(-1, -1, true)}> truck( -1, -1 ) </button>

<button class="btn btn-sm" on:click={() => cameraControls.dolly(1, true)}>dolly 1</button>
<button class="btn btn-sm" on:click={() => cameraControls.dolly(-1, true)}>dolly -1</button>

<button class="btn btn-sm" on:click={() => cameraControls.zoom(camera.zoom / 2, true)}>zoom `camera.zoom / 2`</button>
<button class="btn btn-sm" on:click={() => cameraControls.zoom(-camera.zoom / 2, true)}
>zoom `- camera.zoom / 2`</button
>

<button class="btn btn-sm" on:click={() => cameraControls.moveTo(3, 5, 2, true)}> move to( 3, 5, 2 )</button>
<!-- <button class="btn btn-sm" on:click={()=> cameraControls.fitToBox(mesh, true)}>fit to the bounding box of the mesh</button -->

<button class="btn btn-sm" on:click={() => cameraControls.setPosition(-5, 2, 1, true)}>move to ( -5, 2, 1 )</button>
<button class="btn btn-sm" on:click={() => cameraControls.setTarget(3, 0, -3, true)}>look at ( 3, 0, -3 )</button>
<button class="btn btn-sm" on:click={() => cameraControls.setLookAt(1, 2, 3, 1, 1, 0, true)}
>move to ( 1, 2, 3 ), look at ( 1, 1, 0 )</button
>

<button on:click={() => cameraControls.lerpLookAt(-2, 0, 0, 1, 1, 0, 0, 2, 5, -1, 0, 0, Math.random(), true)}
>move to somewhere between ( -2, 0, 0 ) -> ( 1, 1, 0 ) and ( 0, 2, 5 ) -> ( -1, 0, 0 )</button
>

<button class="btn btn-sm" on:click={() => cameraControls.reset(true)}>reset</button>
<button class="btn btn-sm" on:click={() => cameraControls.saveState()}>saveState</button>
<br />
<button class="btn btn-sm" on:click={() => (cameraControls.enabled = false)}>disable mouse/touch controls</button>
<button class="btn btn-sm" on:click={() => (cameraControls.enabled = true)}>enable mouse/touch controls</button>
<button on:click={() => console.log(camera?.position)}>Log camera in console</button>
</div>
<button class="btn btn-sm" onclick="camera_modal.showModal()">Camera Controls</button>
<button class="btn btn-sm" on:click={() => setCameraView(0, 0, distance, 0, 1, 0)}>Up</button>

<button class="btn btn-sm" on:click={() => setCameraView(0, -distance, 0, 0, 1, 0, true)}>Front</button>
<button class="btn btn-sm" on:click={() => setCameraView(0, distance, 0, 0, -1, 0, true)}>Back</button>

<button class="btn btn-sm" on:click={() => setCameraView(distance, 0, 0, 0, 0, 1, true)}>Left</button>
<button class="btn btn-sm" on:click={() => setCameraView(-distance, 0, 0, 0, 0, 1, true)}>Right</button>
<dialog id="camera_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Camera Controls!</h3>
<div class="info p-6">
<button class="btn btn-sm" on:click={() => cameraControls.zoom(camera.zoom / 2, true)}>Zoom in</button>
<button class="btn btn-sm" on:click={() => cameraControls.zoom(-camera.zoom / 2, true)}>Zoom out</button>

<br />
<button class="btn btn-sm" on:click={() => cameraControls.reset(true)}>reset</button>
<button class="btn btn-sm" on:click={() => cameraControls.saveState()}>saveState</button>
<button class="btn btn-sm" on:click={() => console.log(camera?.position)}>Log camera in console</button>
</div>

<br />
<button class="btn btn-sm" on:click={() => cameraControls.rotate(90 * THREE.MathUtils.DEG2RAD, 0, true)}>
rotate theta 90
</button>
<button class="btn btn-sm" on:click={() => cameraControls.rotate(0, 90 * THREE.MathUtils.DEG2RAD, true)}>
rotate phi 90
</button>

<!-- rotate alpha 90 -->
<button class="btn btn-sm" on:click={() => cameraControls.rotate(0, 90 * THREE.MathUtils.DEG2RAD, true)}>
rotate alpha 90
</button>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
26 changes: 11 additions & 15 deletions src/routes/viewer/components/Viewer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@
import { dataSlices, currentTimeIndex, downloadedTime } from '../stores/allSlices.store';
import { cloudLayerSettings, rainLayerSettings, temperatureLayerSettings, showGrid } from '../stores/viewer.store';
import { create3DScene } from '../sceneSetup/create3DScene';
import { create3DScene, scene, camera } from '../sceneSetup/create3DScene';
import { dataSetup } from '../fetchAndPrepareData/dataSetup';
import { createGridHelper } from '../sceneSetup/createGridHelper';
import { boxes, data_layers } from '../sceneSetup/boxSetup';
// import examplePoints from '../fetchAndPrepareData/examplePoints';
let canvas: HTMLElement;
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let gridHelper: THREE.GridHelper;
//
Expand Down Expand Up @@ -48,12 +47,19 @@
const timing = performance.now();
// Create the base 3D scene (camera, renderer, etc.)
scene = await create3DScene({ canvas, camera });
await create3DScene({ canvas });
// Add the grid helper to the scene
gridHelper = createGridHelper();
scene.add(gridHelper);
//
// Add an axes helper to the scene to help with debugging.
//
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);
//
// Download first slice of the data and
// calculate the voxel and volume size.
// It runs only once.
Expand All @@ -77,21 +83,11 @@
<div class="fixed top-0 left-0">
<a href="/"><button class="btn">← Select dataset</button></a>

<!-- Open the modal using ID.showModal() method -->
<button class="btn" onclick="camera_modal.showModal()">Camera Controls</button>
<dialog id="camera_modal" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Camera Controls!</h3>
<DebugButtons {camera} />
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<button class="btn" on:click={() => toggleGrid()}>
<input type="checkbox" bind:checked={$showGrid} id="gridCheckbox" />
<label class="pointer-events-none" for="gridCheckbox"> Show Grid </label>
</button>
<DebugButtons />
</div>
</div>
<canvas class="w-full h-full" bind:this={canvas} />
2 changes: 1 addition & 1 deletion src/routes/viewer/sceneSetup/boxSetup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function createVolumetricRenderingBox({ scene, variable, dataUint8 }) {
// Clouds Layer
case 'ql': {
boxes.ql = new THREE.Mesh(boxGeometry);
boxes.ql.position.z = 0.01 + 2000 / get(scaleFactor); // was 0.25 // 570 meters above the map TODO: calculate this value from the data
boxes.ql.position.z = 0.04 + 2000 / get(scaleFactor); // was 0.25 // 570 meters above the map TODO: calculate this value from the data
boxes.ql.renderOrder = 0;
boxes.ql.material = initMaterial({ variable });
get(cloudLayerSettings).enabled && scene.add(boxes.ql);
Expand Down
13 changes: 9 additions & 4 deletions src/routes/viewer/sceneSetup/create3DScene.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import CameraControls from 'camera-controls';
import { createPlaneMesh } from './createPlaneMesh';
CameraControls.install({ THREE: THREE });

export let scene: THREE.Scene;
export let camera: THREE.PerspectiveCamera;

export let cameraControls: CameraControls | null = null;
export let renderer: THREE.WebGLRenderer;

Expand All @@ -29,9 +32,9 @@ function resize(canvas, camera) {
camera.updateProjectionMatrix();
}

export function create3DScene({ canvas, camera }): Promise<THREE.Scene> {
export function create3DScene({ canvas }): void {
// Set up the Three.js scene and renderer
const scene = new THREE.Scene();
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas }); // Create a WebGLRenderer and specify the canvas to use

camera = new THREE.PerspectiveCamera(
Expand All @@ -41,7 +44,7 @@ export function create3DScene({ canvas, camera }): Promise<THREE.Scene> {
cameraFar
);

camera.position.set(0, -10, 10); // Adjusted for scaled scene
camera.position.set(0, -30, 50); // Adjusted for scaled scene
camera.lookAt(new THREE.Vector3(0, 0, 0));

cameraControls = new CameraControls(camera, canvas);
Expand All @@ -50,6 +53,8 @@ export function create3DScene({ canvas, camera }): Promise<THREE.Scene> {
scene.add(createPlaneMesh());


// Add controls to the scene
// scene.add(viewHelper);
//
// Lights, to be used both during rendering the volume, and rendering the optional surface.
//
Expand All @@ -72,6 +77,6 @@ export function create3DScene({ canvas, camera }): Promise<THREE.Scene> {
resize(canvas, camera);
animate();

return Promise.resolve(scene); // Fix: Wrap the scene variable in a Promise.resolve() function
// return Promise.resolve(scene); // Fix: Wrap the scene variable in a Promise.resolve() function
// console.log('🔋 3d scene created');
}

0 comments on commit fecf694

Please sign in to comment.