Access this project

Demo URL: https://komar41.github.io/three-js-flow/
GitHub repo: https://github.com/komar41/three-js-flow
Tools used: Three.js, D3.js, JavaScript, HTML, CSS.

This project aims to visualize and analyze computational fluid flow simulation data from the San Diego Supercomputing Center using Three.js and D3.js. The goal is to create an interactive 3D visualization of the flow data, complemented by a linked 2D visualization. This project will provide insights into fluid dynamics while demonstrating various visualization techniques and interactions in a web-based environment.

Flow Visualization with Three.js


Project Objectives

  • Load and display a 3D point cloud on the web
  • Embed a 2D slice visualization within the 3D point cloud using D3.js
  • Implement linked views, brushing and linking, view manipulation, and filtering

Visualization Components

1. 3D Point Cloud Visualization

  • Display the fluid flow data as a 3D point cloud
  • Colormap the point cloud based on concentration values
3D Point Cloud Visualization


2. 2D Vertical Slice View

  • Create a second view using D3.js
  • Display a vertical 2D slice of the data (XY slice with fixed Z value)
2D Vertical Slice View


3. Cut-Plane Filter

  • Add a vertical XY rectangle filter in the 3D view to link with the 2D slice within the 3D flow
  • Allow user to move the rectangle through the flow along the Z axis

Interaction Features

  • Rotate the cylinder containing the flow
  • Move the cut-plane filter along the Z axis
  • Linked updates between 3D and 2D views

Data Source

Resources