Skip to content

Commit

Permalink
(feat) When node out of screen - remove it.
Browse files Browse the repository at this point in the history
  • Loading branch information
@panteleymonchuk
panteleymonchuk committed Oct 17, 2023
1 parent 8da5546 commit 075e395
Show file tree
Hide file tree
Showing 8 changed files with 21 additions and 124 deletions.
11 changes: 7 additions & 4 deletions client/src/features/visualizer-threejs/Emitter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { useFrame, useThree } from "@react-three/fiber";
import React, { RefObject, Dispatch, SetStateAction, useEffect } from "react";
import * as THREE from "three";
import { ZOOM_DEFAULT } from "./constants";
import { useBorderPositions } from "./hooks/useBorderPositions";
import { useBlockStore } from "./store";

interface EmitterProps {
setRunListeners: Dispatch<SetStateAction<boolean>>;
Expand All @@ -19,14 +21,14 @@ const Emitter = ({ setRunListeners, emitterRef }: EmitterProps) => {
/**
* Camera shift
*/
const { halfScreenWidth } = useBorderPositions();
const get = useThree(state => state.get);
const canvasWidth = useThree(state => state.viewport.width);

useFrame(() => {
const camera = get().camera;
const emitterObj = get().scene.getObjectByName("emitter");
if (camera && emitterObj) {
// camera.position.x = emitterObj.position.x - (canvasWidth / 2);
const EMITTER_PADDING_RIGHT = 150;
camera.position.x = emitterObj.position.x - halfScreenWidth + EMITTER_PADDING_RIGHT;
}
});

Expand All @@ -35,7 +37,8 @@ const Emitter = ({ setRunListeners, emitterRef }: EmitterProps) => {
*/
useFrame((_, delta) => {
if (emitterRef?.current) {
// emitterRef.current.position.x += delta * 80;
const DELTA_MULTIPLIER = 80; // depends on this param we can manage speed of emitter
emitterRef.current.position.x += delta * DELTA_MULTIPLIER;
}
});

Expand Down
47 changes: 0 additions & 47 deletions client/src/features/visualizer-threejs/LeftPoint.tsx
View file

This file was deleted.

7 changes: 5 additions & 2 deletions client/src/features/visualizer-threejs/Sphere.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useFrame, useThree } from "@react-three/fiber";
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { ZOOM_DEFAULT } from "./constants";
import { useBorderPositions } from "./hooks/useBorderPositions";
import { useBlockStore } from "./store";

interface SphereProps {
Expand All @@ -15,18 +16,20 @@ interface SphereProps {
const Sphere: React.FC<SphereProps> = ({ id, position, color, scale }) => {
const removeBlock = useBlockStore(s => s.removeBlock);
const removeYPosition = useBlockStore(s => s.removeYPosition);
const canvasWidth = useThree(state => state.viewport.width);
const { halfScreenWidth } = useBorderPositions();
const ref = useRef<THREE.Mesh>(null);
const get = useThree(state => state.get);
const [hovered, hover] = useState(false);
const [clicked, click] = useState(false);

useFrame(() => {
const camera = get().camera;
const PADDING_AFTER_OUT_OF_SCREEN = 0;
const LEFT_BORDER = camera.position.x - halfScreenWidth - PADDING_AFTER_OUT_OF_SCREEN;
if (
ref.current &&
camera &&
ref.current.position?.x < camera.position.x - canvasWidth
ref.current.position?.x < LEFT_BORDER
) {
removeBlock(id);
removeYPosition(position[1]);
Expand Down
64 changes: 1 addition & 63 deletions client/src/features/visualizer-threejs/Spheres.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,15 @@
import { Instances } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import React, { useEffect } from "react";
import * as THREE from "three";
import React from "react";
import { NODE_SIZE_DEFAULT } from "./constants";
import { useZoomDynamic } from "./hooks/useZoomDynamic";
import Sphere from "./Sphere";
import { useBlockStore } from "./store";
import { randomIntFromInterval } from "./utils";

const frustum = new THREE.Frustum();

const Spheres = () => {
const blocks = useBlockStore(s => s.blocks);
const blockOptions = useBlockStore(s => s.blockOptions);
// const get = useThree(state => state.get);
// const scene = useThree(state => state.scene);
// const removeBlock = useBlockStore(s => s.removeBlock);
// const removeYPosition = useBlockStore(s => s.removeYPosition);

useZoomDynamic();

// const addSphere = () => {
// const camera = get().camera;
// const sphere = new THREE.SphereGeometry(5);
// // Create a new sphere geometry and material
// const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
// const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
//
// // Create the sphere mesh
// const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
//
// // Set the sphere's position
// sphereMesh.position.set(camera.position.x, randomIntFromInterval(-200, 200), 0);
// // Add the sphere to the scene
// scene.add(sphereMesh);
// };

// useEffect(() => {
// setInterval(addSphere, 1);
// setInterval(addSphere, 1);
// setInterval(addSphere, 1);
// setInterval(addSphere, 1);
// setInterval(addSphere, 1);
// setInterval(addSphere, 1);
// setInterval(addSphere, 1);
// }, []);

// useEffect(() => {
// const removeNodes = () => {
// console.log("--- remove");
// const camera = get().camera;
// frustum.setFromProjectionMatrix(
// new THREE.Matrix4().multiplyMatrices(
// camera.projectionMatrix,
// camera.matrixWorldInverse
// )
// );
//
// scene.traverse(obj => {
// if (obj instanceof THREE.Mesh) {
// if (obj?.name) {
// removeBlock(obj.name);
// removeYPosition(obj.position.y);
// }
// obj.remove();
// }
// });
// };
//
// setInterval(removeNodes, 5000);
// }, []);


return (
<Instances
limit={2500}
Expand Down
4 changes: 1 addition & 3 deletions client/src/features/visualizer-threejs/VisualizerInstance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { IFeedBlockData } from "../../models/api/stardust/feed/IFeedBlockData";
import { StardustFeedClient } from "../../services/stardust/stardustFeedClient";
import { colors, ZOOM_DEFAULT } from "./constants";
import Emitter from "./Emitter";
import { LeftPoint } from "./LeftPoint";
import Spheres from "./Spheres";
import { useBlockStore } from "./store";
import { getGenerateY, randomIntFromInterval, timer } from "./utils";
Expand Down Expand Up @@ -86,7 +85,7 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
Y,
randomIntFromInterval(emitterBox.min.z, emitterBox.max.z)
];
return;

addBlock({
id: blockData.blockId,
position
Expand Down Expand Up @@ -141,7 +140,6 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
<color attach="background" args={["#f2f2f2"]} />
<ambientLight />
<directionalLight position={[100, 100, 50]} />
<LeftPoint />
<Emitter emitterRef={emitterRef} setRunListeners={setRunListeners} />
<Spheres />
{/* {controlsEnabled && <CameraControls makeDefault />} */}
Expand Down
2 changes: 1 addition & 1 deletion client/src/features/visualizer-threejs/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const NODE_SIZE_DEFAULT = 5;
export const NODE_SIZE_INCREMENT = 3;

// zoom
export const ZOOM_DEFAULT = 2;
export const ZOOM_DEFAULT = 3;

export const SECOND = 1000;
export const DATA_SENDER_TIME_INTERVAL = 500;
Expand Down
7 changes: 6 additions & 1 deletion client/src/features/visualizer-threejs/hooks/useBorderPositions.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { useMemo } from "react";
import { useBlockStore } from "../store";

export const useBorderPositions = () => {
const zoom = useBlockStore(s => s.zoom);
const canvasWidth = useBlockStore(state => state.dimensions.width);

const borderLeftPosition = useMemo(() => -(canvasWidth / zoom / 2), [canvasWidth, zoom]);
const halfScreenWidth = useMemo(() => canvasWidth / zoom / 2, [canvasWidth, zoom]);

return {
borderLeftPosition: -(canvasWidth / zoom / 2)
borderLeftPosition,
halfScreenWidth
};
};
3 changes: 0 additions & 3 deletions client/src/features/visualizer-threejs/hooks/useZoomDynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,8 @@ export const useZoomDynamic = () => {
*/
const cameraState = useThree(state => state.camera);
const zoomStore = useBlockStore(s => s.zoom);
const setZoom = useBlockStore(s => s.setZoom);
useEffect(() => {
if (cameraState) {
// @ts-expect-error
window.setZoom = setZoom;
cameraState.zoom = zoomStore;
cameraState.updateProjectionMatrix();
}
Expand Down

0 comments on commit 075e395

Please sign in to comment.