Save the current layout in a cookie

Question

Save the current layout in a cookie

We are utilizing three.js to display 3D representations of stomach contents based on MRI data. The colors represent approximate concentrations, with each bubble representing a voxel in the 3D space. Use the menu on the left to load different views.

(Feel free to use this link as sample code)

The flat surface at the top (adjust the image rotation) simulates the liquid level of the meal due to gravity.

We are interested in saving the current view in a cookie so that users can return to the same perspective later on. However, I am unsure which matrix to store in the cookie.

I have reviewed https://github.com/mrdoob/three.js/issues/1188#issuecomment-3666286

but I have yet to pinpoint the specific matrix to store in the cookie. The ones I have identified do not update during rotation. Please note that while I am familiar with using cookies, this is more of a THREE.js-specific inquiry rather than a general JavaScript programming question.

javascript three.js

Answer 1

Answer №1

To save only the camera coordinates, you can use the following method:

var savedData = JSON.stringify( [
    camera.position.x,
    camera.position.y,
    camera.position.z,
    camera.rotation.x,
    camera.rotation.y,
    camera.rotation.z
] );

When you want to set up the camera using the saved data, follow this code snippet:

var dataArray = JSON.parse( savedData );
camera.position.x = dataArray[ 0 ];
camera.position.y = dataArray[ 1 ];
camera.position.z = dataArray[ 2 ];
camera.rotation.x = dataArray[ 3 ];
camera.rotation.y = dataArray[ 4 ];
camera.rotation.z = dataArray[ 5 ];

Answer 2

To save only the camera coordinates, you can use the following method:

var savedData = JSON.stringify( [
    camera.position.x,
    camera.position.y,
    camera.position.z,
    camera.rotation.x,
    camera.rotation.y,
    camera.rotation.z
] );

When you want to set up the camera using the saved data, follow this code snippet:

var dataArray = JSON.parse( savedData );
camera.position.x = dataArray[ 0 ];
camera.position.y = dataArray[ 1 ];
camera.position.z = dataArray[ 2 ];
camera.rotation.x = dataArray[ 3 ];
camera.rotation.y = dataArray[ 4 ];
camera.rotation.z = dataArray[ 5 ];

Save the current layout in a cookie

Answer №1

Similar questions

What is the best way to toggle the visibility of multiple column groups in Ag-Grid community using dynamic

What is the best way to transfer a JSON object from Java to JavaScript?

Showing additional content in an alternative design

Comparison between PHP's JSON parser and Javascript's JSON parser

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Modifying the default label for each bubble on a bubble chart with chartjs-plugin-datalabels

Having trouble accessing properties within a JavaScript object array in React.js?

Repeatedly Triggered JQuery AJAX Calls

Creating a TextGeometry in THREE JS that Reacts to Mouse Movements

Why is my jQuery SlideReveal not displaying on page load?

Creating header menus with section labels in Windows 8 Metro can be easily accomplished by utilizing Javascript

Using useState props in React Native navigation screens with React Navigation

tips on launching a pre-existing react native project

Utilize Angular's ngFor directive to loop through HTML elements and

Is it possible to create a TypeScript generic type that transforms a Record into a type by utilizing the `as const` keyword?

Dynamically add a plugin to jQuery during execution

Ways to implement the function provided in the website using javascript

In React, the entire component refreshes every time the modal is opened

Lazy loading images without the need to manually adjust the image structure

Launching various modals on marker click