Skip to content

Commit 40b2e07

Browse files
authored
Merge pull request #32 from EarthyScience/Rearranged
Reorganized Original Scripts
2 parents 4d9dc51 + b6a3271 commit 40b2e07

26 files changed

+57
-97
lines changed

src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Navbar, Footer, CanvasGeometry, } from '@/components';
2-
import Overlays from "@/components/Overlays";
1+
import { Navbar, Footer, CanvasGeometry, } from '@/components/UI';
2+
import Overlays from "@/components/UI/Overlays";
33
import './App.css'
44
export function App() {
55
return (

src/components/CanvasGeometry.tsx

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import * as THREE from 'three'
22
THREE.Cache.enabled = true;
33
import { Canvas } from '@react-three/fiber';
4-
import { Center, OrbitControls, Environment, Html } from '@react-three/drei'
4+
import { Center, OrbitControls, Environment } from '@react-three/drei'
55
// import * as zarr from 'zarrita'
66
import { variables, ZarrDataset } from '@/components/ZarrLoaderLRU'
77
import { useEffect, useState, useMemo } from 'react';
88
// import { useEffect, useState } from 'react';
99
import { useControls } from 'leva'
1010
// import { Leva } from 'leva'
1111
// import { lightTheme } from '@/utils/levaTheme'
12-
import { ArrayToTexture, DefaultCube } from './TextureMakers';
13-
import { DataCube, PointCloud, UVCube, PlotLine } from './PlotObjects';
14-
import { TimeSeries } from './TimeSeries';
12+
import { ArrayToTexture, DefaultCube } from './Textures/TextureMakers';
13+
import { DataCube, PointCloud, UVCube, PlotLine } from './PlotObjects/PlotObjects';
1514
// import { PlaneAxis } from './PlaneAxis';
16-
import { PlotArea } from './PlotArea'
17-
import { GetColorMapTexture } from '@/utils/colormap';
15+
import { PlotArea } from './PlotObjects/PlotArea/PlotArea'
16+
import { GetColorMapTexture } from '@/components/Textures/colormap';
1817

1918
const colormaps = ['viridis', 'plasma', 'inferno', 'magma', 'Accent', 'Blues',
2019
'CMRmap', 'twilight', 'tab10', 'gist_earth', 'cividis',
@@ -58,7 +57,6 @@ export function CanvasGeometry() {
5857
const [shape, setShape] = useState<THREE.Vector3 | THREE.Vector3>(new THREE.Vector3(2, 2, 2))
5958
const [timeSeriesLocs,setTimeSeriesLocs] = useState<TimeSeriesLocs>({uv:new THREE.Vector2(.5,.5), normal:new THREE.Vector3(0,0,1)})
6059
const [valueScales,setValueScales] = useState({maxVal:1,minVal:-1})
61-
const [showTimeSeries,setShowTimeSeries] = useState<boolean>(false)
6260
const [colormap,setColormap] = useState<THREE.DataTexture>(GetColorMapTexture())
6361
const [timeSeries, setTimeSeries] = useState<number[]>([0]);
6462
const [showLoading, setShowLoading] = useState<boolean>(false);
@@ -147,37 +145,7 @@ export function CanvasGeometry() {
147145
<Environment preset="city" />
148146

149147
</Canvas>
150-
</div>
151-
{showTimeSeries && <>
152-
153-
<TimeSeries timeSeriesLocs={timeSeriesLocs} DSInfo={{variable:variable, storePath:storeURL}} scaling={{...valueScales,colormap}}/>
154-
<Html
155-
fullscreen
156-
style={{
157-
pointerEvents: 'none', // Prevents capturing mouse events
158-
}}
159-
>
160-
{/* Stand in button to remove time-series stuff */}
161-
<button style={{
162-
position: 'absolute',
163-
bottom: '100px',
164-
right: '100px',
165-
padding: '8px 16px',
166-
backgroundColor: '#3498db',
167-
color: 'white',
168-
border: 'none',
169-
borderRadius: '4px',
170-
cursor: 'pointer',
171-
pointerEvents: 'auto'
172-
173-
}}
174-
onClick={()=>setShowTimeSeries(false)}
175-
>
176-
Hide Time Series
177-
</button>
178-
</Html>
179-
</>}
180-
148+
</div>
181149
<PlotArea >
182150
<PlotLine
183151
data={timeSeries}
File renamed without changes.
File renamed without changes.
File renamed without changes.

src/components/PlotObjects.tsx renamed to src/components/PlotObjects/PlotObjects.tsx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useMemo } from 'react'
2-
import { useRef } from 'react'
2+
import { useRef, useState } from 'react'
33
import * as THREE from 'three'
4-
import vertexShader from '@/utils/shaders/vertex.glsl';
5-
import fragmentShader from '@/utils/shaders/fragment.glsl';
4+
import vertexShader from '@/components/Textures/shaders/vertex.glsl';
5+
import fragmentShader from '@/components/Textures/shaders/fragment.glsl';
66
import { useControls } from 'leva';
7-
import pointVert from '@/utils/shaders/pointVertex.glsl';
8-
import pointFrag from '@/utils/shaders/pointFrag.glsl';
7+
import pointVert from '@/components/Textures/shaders/pointVertex.glsl';
8+
import pointFrag from '@/components/Textures/shaders/pointFrag.glsl';
99

1010
const colormaps = ['viridis', 'plasma', 'inferno', 'magma', 'Accent', 'Blues',
1111
'CMRmap', 'twilight', 'tab10', 'gist_earth', 'cividis',
@@ -128,8 +128,6 @@ interface TimeSeriesLocs{
128128
normal:THREE.Vector3
129129
}
130130

131-
import { useState } from 'react'
132-
133131
export const UVCube = ({shape,setTimeSeriesLocs} : {shape:THREE.Vector3, setTimeSeriesLocs:React.Dispatch<React.SetStateAction<TimeSeriesLocs>>} )=>{
134132
const [clickPoint, setClickPoint] = useState<THREE.Vector3 | null>(null);
135133
function TimeSeriesLocs(event: THREE.Intersection){
@@ -217,7 +215,7 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
217215
const py = (y / (height - 1)) - 0.5;
218216
const pz = ((z / (depth - 1)) - 0.5) * depthRatio;
219217

220-
positions.push(px, py, pz);
218+
positions.push(px*2, py*2, pz*2); //This two is to match the scale of the volume which defaults to 2x2
221219
values.push(value);
222220
}
223221
}
@@ -326,10 +324,6 @@ export const PlotLine = ({
326324
return new THREE.BufferGeometry().setFromPoints(points);
327325
}, [data]);
328326

329-
// const material = useMemo(() => {
330-
// return new THREE.LineBasicMaterial({ color, linewidth: lineWidth });
331-
// }, [color, lineWidth]);
332-
333327
const material = useMemo(() => {
334328
return new THREE.ShaderMaterial({
335329
glslVersion: THREE.GLSL3,
@@ -362,8 +356,6 @@ export const PlotLine = ({
362356
});
363357
}, [color, lineWidth]);
364358

365-
366-
367359
const pointsMaterial = useMemo(() => {
368360
return new THREE.PointsMaterial({
369361
color: pointColor || color,
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)