Thiết kế website giá rẻ

Question

so my problem is that I’m beggining on r3f and I guess the problem isn’t in that for the uploading error, but I have so much code that I can’t figure out logic for updating the components, and in advance, sorry for the messed up code I just made sure that this thing works. So, the problem is as you’ll see the clock that I made in r3f is looking good for the spheres around it, but the lines that are presenting hours,minutes, seconds are not updating onload and not even after interval of 1000ms they’re only updating when i run npm dun dev and i hit repeatedly save on vscode and only then the position changes, the angle is okay its updating with one second interval but the position stays the same, can you please tell me whats the issue, again sorry for messy code

This is the Canvas component

/* eslint-disable react-hooks/exhaustive-deps */
import { Canvas } from "@react-three/fiber";
import { useEffect, useRef } from "react";
import "../styles/canvas.scss";
import Sphere from "./Sphere";
import * as THREE from "three";
import Lines from "./Lines";

interface LineRotateProps {
  line: number;
  angle: number;
  ringRotation: number;
  topTranslation: number;
  depthTranslation: number;
}

const Canvasess: CanvasRect = () => {
  // State to track mouse position
  const meshRef1 = useRef<THREE.Mesh>(null!);
  const meshRef2 = useRef<THREE.Mesh>(null!);
  const meshRef3 = useRef<THREE.Mesh>(null!);
  const hoursAngles = useRef<THREE.Mesh>(null!);
  const minutesAngles = useRef<THREE.Mesh>(null!);
  const secondsAngles = useRef<THREE.Mesh>(null!);
  const mousePos = new THREE.Vector2();
  const positionHours = useRef<THREE.Mesh>(null!);
  const positionMinutes = useRef<THREE.Mesh>(null!);
  const positionSeconds = useRef<THREE.Mesh>(null!);
  const hourAngle = useRef<THREE.Mesh>(null!);
  const minuteAngle = useRef<THREE.Mesh>(null!);
  const secondAngle = useRef<THREE.Mesh>(null!);

  const updateAngles = async () => {
    const date = new Date();
    hourAngle.current = (date.getHours() / 12) * Math.PI * 2;
    minuteAngle.current = (date.getMinutes() / 60) * Math.PI * 2;
    secondAngle.current = (date.getSeconds() / 60) * Math.PI * 2;

    if (hoursAngles.current && hoursAngles.current.rotation) {
      hoursAngles.current.rotation.z = -hourAngle.current;
    }
    if (minutesAngles.current && minutesAngles.current.rotation) {
      minutesAngles.current.rotation.z = -minuteAngle.current;
    }
    if (secondsAngles.current && secondsAngles.current.rotation) {
      secondsAngles.current.rotation.z = -secondAngle.current;
    }

    positionHours.current = [
      Math.sin(hourAngle.current),
      Math.cos(hourAngle.current),
      0,
    ];
    positionMinutes.current = [
      Math.sin(minuteAngle.current),
      Math.cos(minuteAngle.current),
      0,
    ];
    positionSeconds.current = [
      Math.sin(secondAngle.current),
      Math.cos(secondAngle.current),
      0,
    ];
  };

  useEffect(() => {
    document.addEventListener("DOMContentLoaded", updateAngles);

    return () => {
      document.removeEventListener("DOMContentLoaded", updateAngles);
    };
  }, [updateAngles, positionHours, positionSeconds, positionMinutes]);

  useEffect(() => {
    const interval = setInterval(updateAngles, 1000);
    updateAngles();
    return () => clearInterval(interval);
  }, [updateAngles, positionHours, positionSeconds, positionMinutes]);

  function handleMouseMove({ event: MouseEvent }) {
    mousePos.x = event.clientX - innerWidth * 0.5;
    mousePos.y = event.clientY - innerHeight * 0.5;
    meshRef1.current.rotation.x =
      meshRef1.current.rotation.x * 0.15 + mousePos.y * 0.00047 * 0.1;
    meshRef1.current.rotation.y =
      meshRef1.current.rotation.y * -0.95 + mousePos.x * 0.00044 * 0.1;
    meshRef2.current.rotation.x =
      meshRef2.current.rotation.x * 0.99 + mousePos.y * -0.00037 * 0.1;
    meshRef2.current.rotation.y =
      meshRef2.current.rotation.y * -0.55 + mousePos.x * 0.00014 * 0.1;
    meshRef3.current.rotation.x = mousePos.y * 0.00057;
    meshRef3.current.rotation.y = mousePos.x * 0.00044;
  }

  function roatateLine(
    line: number,
    angle: number,
    ringRotation: number,
    topTranslation: number,
    depthTranslation: number
  ): LineRotateProps {
    const lineTranslation = new THREE.Matrix4().makeTranslation(
      0,
      topTranslation,
      depthTranslation
    );
    const lineRotation = new THREE.Matrix4().makeRotationAxis(
      new THREE.Vector3(0, 0, 1),
      -angle
    );
    const lineRotation2 = new THREE.Matrix4().makeRotationFromEuler(
      new THREE.Euler().copy(ringRotation)
    );
    line.matrix.copy(new THREE.Matrix4().multiply());
  }

  useEffect(() => {
    document.addEventListener("mousemove", handleMouseMove);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return (
    <div className="canvasDiv">
      <Canvas>
        <ambientLight intensity={0.6} />
        <directionalLight position={[0.7, 0.2, 0.16]} />
        <spotLight
          position={[0.1, 46, 1.6]}
          angle={0.9}
          penumbra={0.6}
          intensity={1}
        />
        <pointLight position={[0.1, 0.2, 2]} intensity={1.3} />
        {/* Render Sphere components with refs and rotation values */}
        <Sphere refRef={meshRef1} scale={[1.55, 1.55, 1.55]} />
        <Sphere refRef={meshRef2} scale={[1.22, 1.22, 1.22]} />
        <Sphere refRef={meshRef3} scale={[1, 1, 1]} />
        <Lines
          widths={0.44}
          heights={0.135}
          depths={0.17}
          position={positionHours.current}
          refs={hoursAngles}
          color={"#55bf45"}
        />
        <Lines
          widths={0.94}
          heights={0.135}
          depths={0.17}
          position={positionMinutes.current}
          refs={minutesAngles}
          color={"#55bf41"}
        />
        <Lines
          widths={1.3}
          heights={0.135}
          depths={0.17}
          position={positionSeconds.current}
          refs={secondsAngles}
          color={"#55bf4c"}
        />
      </Canvas>
    </div>
  );
};

export default Canvasess;

And this is the Line component

import * as THREE from "three";
interface LineProps {
  refs: number;
  position: [number, number, number];
  widths: number;
  heights: number;
  depths: number;
  color: string;
}

function Lines({ refs, position, widths, heights, depths, color }): LineProps {
  function customLine(
    height: number,
    width: number,
    depth: number,
    color: string
  ) {
    const box = new THREE.BoxGeometry(height, width, depth);
    const topCap = new THREE.CylinderGeometry(
      width * 0.5,
      width * 0.5,
      depth,
      70
    );
    const bottomCap = new THREE.CylinderGeometry(
      width * 0.5,
      width * 0.5,
      depth,
      70
    );
    const material = new THREE.MeshStandardMaterial({
      metalness: 0.2,
      roughness: 0.5,
      side: THREE.DoubleSide,
      color: color,
    });

    return (
      <group>
        <mesh
          geometry={box}
          rotation={[0, 0, 1.6]}
          material={material}
          position={[0, 0, 0]}
        />
        <mesh
          geometry={topCap}
          rotation={[1.59, 0, 0]}
          material={material}
          position={[-0.006, 0.2, 0]}
        />
        <mesh
          geometry={bottomCap}
          rotation={[1.59, 0, 0]}
          material={material}
          position={[0.006, -0.2, -0.0001]}
        />
      </group>
    );
  }

  return (
    <group>
      <group ref={refs} position={position}>
        {customLine(widths, heights, depths, color)}
      </group>
    </group>
  );
}

export default Lines;

I figured what could be wrong but I’m still stuck on where or how should I change it, can you guys hel me at all, thanks in advance

I’ve tried as you see updating on UseEffect on component change and update but that didnt work, so I dont know what else i could do

Thiết kế website giá rẻ

Danh mục

I got problem with updating React components for r3f