diff --git a/src/components/plots/AxisLines.tsx b/src/components/plots/AxisLines.tsx index 8f272846..fea5d059 100644 --- a/src/components/plots/AxisLines.tsx +++ b/src/components/plots/AxisLines.tsx @@ -69,6 +69,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli const depthRatio = useMemo(()=>dataShape[0]/dataShape[2]*timeScale,[dataShape, timeScale]); const shapeRatio = useMemo(()=>dataShape[1]/dataShape[2], [dataShape]) + const timeRatio = Math.max(dataShape[0]/dataShape[2], 2); const secondaryColor = useCSSVariable('--text-plot') //replace with needed variable const colorHex = useMemo(()=>{ @@ -89,7 +90,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli return new LineSegments2(geom, lineMat)},[yRange, shapeRatio, lineMat, globalScale]) const zLine = useMemo(()=> { - const geom = new LineSegmentsGeometry().setPositions([0, 0, isPC ? zRange[0]*globalScale*depthRatio-tickLength/2 : zRange[0]-tickLength/2, 0, 0, isPC ? zRange[1]*globalScale*depthRatio+tickLength/2 : zRange[1]+tickLength/2]); + const geom = new LineSegmentsGeometry().setPositions([0, 0, isPC ? zRange[0]*globalScale*depthRatio-tickLength/2 : (zRange[0]*timeRatio-tickLength)/2, 0, 0, isPC ? zRange[1]*globalScale*depthRatio+tickLength/2 : (zRange[1]*timeRatio+tickLength)/2]); return new LineSegments2(geom, lineMat)},[zRange, depthRatio, isPC, lineMat, globalScale]) const tickLine = useMemo(()=> { @@ -112,7 +113,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli {/* Horizontal Group */} {/* X Group */} - + {Array(xResolution).fill(null).map((_val,idx)=>( (((xRange[0] + 1)/2) <= (idx*xDimScale)/xResolution && @@ -182,7 +183,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli (((zRange[0] + 1)/2) <= (idx*zDimScale)/zResolution && ((zRange[1] + 1)/2) >= (idx*zDimScale)/zResolution ) && - + {/* Vertical Group */} - + {Array(yResolution).fill(null).map((_val,idx)=>( (((yRange[0] + 1)/2) <= (idx*yDimScale)/yResolution && diff --git a/src/components/plots/DataCube.tsx b/src/components/plots/DataCube.tsx index 82c982cc..ddca7957 100644 --- a/src/components/plots/DataCube.tsx +++ b/src/components/plots/DataCube.tsx @@ -38,6 +38,7 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => { }))) const meshRef = useRef(null!); const aspectRatio = shape.y/shape.x + const timeRatio = shape.z/shape.x; const shaderMaterial = useMemo(()=>new THREE.ShaderMaterial({ glslVersion: THREE.GLSL3, uniforms: { @@ -49,7 +50,7 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => { cScale: {value: cScale}, threshold: {value: new THREE.Vector2(valueRange[0],valueRange[1])}, scale: {value: shape}, - flatBounds:{value: new THREE.Vector4(-xRange[1],-xRange[0],zRange[0],zRange[1])}, + flatBounds:{value: new THREE.Vector4(-xRange[1],-xRange[0],zRange[0] * timeRatio, zRange[1] * timeRatio)}, vertBounds:{value: new THREE.Vector2(yRange[0]*aspectRatio,yRange[1]*aspectRatio)}, steps: { value: quality }, animateProg: {value: animProg}, @@ -77,7 +78,7 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => { uniforms.cScale.value = cScale; uniforms.threshold.value.set(valueRange[0], valueRange[1]); uniforms.scale.value = shape; - uniforms.flatBounds.value.set(-xRange[1], -xRange[0], zRange[0], zRange[1]); + uniforms.flatBounds.value.set(-xRange[1], -xRange[0], zRange[0] * timeRatio, zRange[1] * timeRatio); uniforms.vertBounds.value.set(yRange[0] * aspectRatio, yRange[1] * aspectRatio); uniforms.steps.value = quality; uniforms.animateProg.value = animProg; diff --git a/src/components/plots/Plot.tsx b/src/components/plots/Plot.tsx index fd084e2f..73f8228a 100644 --- a/src/components/plots/Plot.tsx +++ b/src/components/plots/Plot.tsx @@ -215,8 +215,9 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => { else{ setIsFlat(false) } - const shapeRatio = result.shape[shapeLength-2] / result.shape[shapeLength-1] * 2; - setShape(new THREE.Vector3(2, shapeRatio, 2)); + const aspectRatio = result.shape[shapeLength-2] / result.shape[shapeLength-1]; + const timeRatio = result.shape[shapeLength-3] / result.shape[shapeLength-1]; + setShape(new THREE.Vector3(2, aspectRatio * 2, Math.max(timeRatio, 2))); setDataShape(result.shape) setShow(true) setPlotOn(true)