“Even though we navigate daily through a perceptual world of three dimensions… the world displayed on our information displays is caught up in the two dimensionality of the endless flatlands of paper and video screens… Escaping this flatland is the essential task of envisioning information — for all the interesting worlds that we seek to understand are inevitably and happily multivariate in nature. Not flatlands.” (Tufte 1990)
Computer screens have the ability to display a wide range of information. Beyond 3D coordinates, they can simultaneously show colors, dynamic patterns, rotations, and motions, enabling human eyes to observe and interpret complex datasets. Zooming further enhances this by allowing both micro and macro readings on the same device, supporting more comprehensive data analysis.
This project demonstrates optimization techniques for plotting large datasets in a 3D space using Three.js and Octree. It also explores how Three.js can be integrated into a Svelte project, though Threlte offers a more mature solution for this purpose.
Try the live demo!
- Under the project root, make sure you're running node 20 or run
nvm useif you have nvm installed. - Install dependencies with
npm install(orpnpm installoryarn) - Start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
-
Build image
docker build -t="escaping_flatland" .
-
Run the built image
# run container and redirect host port 3000 to container port 3000 docker run --name escaping -d -p 3000:3000 escaping_flatland -
Visit to play the demo localhost:3000
-
Stop & remove the image
docker stop escaping docker rm escaping docker rmi escaping_flatland
- implement scene/canvas component
- implement mesh component
- add some mock data
- implement frustum culler
- deploy onto a hosting service provider