From e506ff7f2e88dd56825e5cddec4fc43b0e2afa66 Mon Sep 17 00:00:00 2001 From: Milan_sacahni Date: Sun, 6 Oct 2024 14:35:51 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(ThreeJSAnimation.jsx):=20?= =?UTF-8?q?refactor=20ThreeJSVisualizer=20component=20to=20remove=20commen?= =?UTF-8?q?ted-out=20code=20and=20consolidate=20duplicate=20code=20for=20b?= =?UTF-8?q?etter=20maintainability=20and=20readability.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ThreeJSAnimation.jsx | 346 ---------------------------- 1 file changed, 346 deletions(-) diff --git a/src/components/ThreeJSAnimation.jsx b/src/components/ThreeJSAnimation.jsx index 091b0c4d3..c8de46642 100644 --- a/src/components/ThreeJSAnimation.jsx +++ b/src/components/ThreeJSAnimation.jsx @@ -132,352 +132,6 @@ // import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // import * as Tone from "tone"; -// const ThreeJSVisualizer = () => { -// const mountRef = useRef(null); -// const [isPlaying, setIsPlaying] = useState(false); -// const [toneStarted, setToneStarted] = useState(false); -// const [audioLoaded, setAudioLoaded] = useState(false); // Track if the audio is loaded -// const rendererRef = useRef(null); // To store the renderer -// const playerRef = useRef(null); // Store player instance across renders -// const animationIdRef = useRef(null); // Store animation ID -// let particles, analyser, controls; - -// // Initialize Tone.js player and analyser -// useEffect(() => { -// playerRef.current = new Tone.Player({ -// url: "/Baby.mp3", -// autostart: false, -// onload: () => { -// setAudioLoaded(true); // Set audio as loaded when the buffer is ready -// }, -// }).toDestination(); - -// analyser = new Tone.Analyser("fft", 256); // Using FFT to get frequency data -// playerRef.current.connect(analyser); - -// return () => { -// if (playerRef.current) { -// playerRef.current.dispose(); // Clean up player when component unmounts -// } -// }; -// }, []); - -// const handlePlay = async () => { -// if (!toneStarted) { -// await Tone.start(); // Ensure Tone.js is started (required in browser) -// setToneStarted(true); -// } - -// // Only start playing if the audio is loaded -// if (isPlaying && audioLoaded && playerRef.current) { -// playerRef.current.start(); // Start playback -// } else if (!isPlaying && playerRef.current) { -// playerRef.current.stop(); // Stop playback -// } -// }; - -// useEffect(() => { -// handlePlay(); -// }, [isPlaying, audioLoaded]); // Trigger handlePlay when play state changes - -// // Set up Three.js scene -// useEffect(() => { -// const scene = new THREE.Scene(); -// const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); -// const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); -// renderer.setSize(150, 150); -// renderer.setPixelRatio(window.devicePixelRatio); -// renderer.setClearColor(0x000000, 0); // Set background color to black -// mountRef.current.appendChild(renderer.domElement); -// rendererRef.current = renderer; - -// // Create particle system -// const particleCount = 500; -// const geometry = new THREE.BufferGeometry(); -// const positions = new Float32Array(particleCount * 3); -// const sphericalRadius = 5; // Set a spherical radius - -// for (let i = 0; i < particleCount; i++) { -// // Generate random positions within a sphere -// const phi = Math.random() * Math.PI * 2; -// const theta = Math.acos(Math.random() * 2 - 1); - -// positions[i * 3] = sphericalRadius * Math.sin(theta) * Math.cos(phi); -// positions[i * 3 + 1] = sphericalRadius * Math.sin(theta) * Math.sin(phi); -// positions[i * 3 + 2] = sphericalRadius * Math.cos(theta); -// } - -// geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)); -// const material = new THREE.PointsMaterial({ -// color: 0xff007f, -// size: 0.1, -// }); - -// particles = new THREE.Points(geometry, material); -// scene.add(particles); - -// // Camera and controls -// camera.position.z = 10; // Move the camera back for better viewing of the sphere -// controls = new OrbitControls(camera, renderer.domElement); -// controls.enableZoom = false; -// controls.autoRotate = true; // Enable auto-rotation for a cooler effect -// controls.autoRotateSpeed = 1.5; // Set a reasonable speed for rotation - -// // Animation loop -// const animate = () => { -// if (isPlaying && analyser) { -// const frequencyData = analyser.getValue(); // Get frequency data from Tone.js -// const positions = particles.geometry.attributes.position.array; - -// // Update particle positions based on frequency data -// for (let i = 0; i < particleCount; i++) { -// // Ensure frequencyData is valid (not NaN) -// const audioFactor = -// Math.abs(frequencyData[i % frequencyData.length]) || 0; // Default to 0 if invalid -// if (!isNaN(audioFactor)) { -// positions[i * 3] += Math.sin(audioFactor) * 0.02; // Bump particles slightly -// positions[i * 3 + 1] += Math.sin(audioFactor) * 0.02; -// positions[i * 3 + 2] += Math.cos(audioFactor) * 0.02; -// } -// } - -// particles.geometry.attributes.position.needsUpdate = true; // Update positions -// } - -// controls.update(); // Update OrbitControls -// renderer.render(scene, camera); -// animationIdRef.current = requestAnimationFrame(animate); -// }; - -// animate(); - -// // Clean up -// return () => { -// cancelAnimationFrame(animationIdRef.current); // Cancel animation loop -// if (rendererRef.current) { -// rendererRef.current.dispose(); // Clean up renderer -// } -// }; -// }, []); // Note: This runs only once - -// // Toggle play/pause -// const togglePlay = () => { -// setIsPlaying(!isPlaying); -// }; - -// return ( -//
-//
-// -//
-// ); -// }; - -// export default ThreeJSVisualizer; - -// import React, { useRef, useEffect, useState } from "react"; -// import * as THREE from "three"; -// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; -// import * as Tone from "tone"; - -// const ThreeJSVisualizer = () => { -// const mountRef = useRef(null); -// const [isPlaying, setIsPlaying] = useState(false); -// const [toneStarted, setToneStarted] = useState(false); -// const [audioLoaded, setAudioLoaded] = useState(false); // Track if the audio is loaded -// const rendererRef = useRef(null); // To store the renderer -// const controlsRef = useRef(null); // To store OrbitControls -// const playerRef = useRef(null); // Store player instance across renders -// const animationIdRef = useRef(null); // Store animation ID -// let particles, analyser; - -// // Initialize Tone.js player and analyser -// useEffect(() => { -// playerRef.current = new Tone.Player({ -// url: "/Baby.mp3", -// autostart: false, -// onload: () => { -// setAudioLoaded(true); // Set audio as loaded when the buffer is ready -// }, -// }).toDestination(); - -// analyser = new Tone.Analyser("fft", 256); // Using FFT to get frequency data -// playerRef.current.connect(analyser); - -// return () => { -// if (playerRef.current) { -// playerRef.current.dispose(); // Clean up player when component unmounts -// } -// }; -// }, []); - -// const handlePlay = async () => { -// if (!toneStarted) { -// await Tone.start(); // Ensure Tone.js is started (required in browser) -// setToneStarted(true); -// } - -// // Only start playing if the audio is loaded -// if (isPlaying && audioLoaded && playerRef.current) { -// playerRef.current.start(); // Start playback -// if (controlsRef.current) controlsRef.current.autoRotate = true; // Start rotating on play -// } else if (!isPlaying && playerRef.current) { -// playerRef.current.stop(); // Stop playback -// if (controlsRef.current) controlsRef.current.autoRotate = false; // Stop rotating on stop -// } -// }; - -// useEffect(() => { -// handlePlay(); -// }, [isPlaying, audioLoaded]); // Trigger handlePlay when play state changes - -// // Set up Three.js scene -// useEffect(() => { -// const scene = new THREE.Scene(); -// const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); -// const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); -// renderer.setSize(150, 150); -// renderer.setPixelRatio(window.devicePixelRatio); -// renderer.setClearColor(0x000000, 0); // Set background color to black -// mountRef.current.appendChild(renderer.domElement); -// rendererRef.current = renderer; - -// // Create particle system -// const particleCount = 500; -// const geometry = new THREE.BufferGeometry(); -// const positions = new Float32Array(particleCount * 3); -// const sphericalRadius = 5; // Set a spherical radius - -// for (let i = 0; i < particleCount; i++) { -// // Generate random positions within a sphere -// const phi = Math.random() * Math.PI * 2; -// const theta = Math.acos(Math.random() * 2 - 1); - -// positions[i * 3] = sphericalRadius * Math.sin(theta) * Math.cos(phi); -// positions[i * 3 + 1] = sphericalRadius * Math.sin(theta) * Math.sin(phi); -// positions[i * 3 + 2] = sphericalRadius * Math.cos(theta); -// } - -// geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)); -// const material = new THREE.PointsMaterial({ -// color: 0xff007f, -// size: 0.1, -// }); - -// particles = new THREE.Points(geometry, material); -// scene.add(particles); - -// // Camera and controls -// camera.position.z = 10; // Move the camera back for better viewing of the sphere -// const controls = new OrbitControls(camera, renderer.domElement); -// controls.enableZoom = false; -// controls.autoRotate = false; // Rotation starts only when the song is playing -// controlsRef.current = controls; // Store controls in ref for later access - -// // Animation loop -// const animate = () => { -// if (isPlaying && analyser) { -// const frequencyData = analyser.getValue(); // Get frequency data from Tone.js -// const positions = particles.geometry.attributes.position.array; - -// // Update particle positions based on frequency data -// for (let i = 0; i < particleCount; i++) { -// // Ensure frequencyData is valid (not NaN) -// const audioFactor = -// Math.abs(frequencyData[i % frequencyData.length]) || 0; // Default to 0 if invalid -// if (!isNaN(audioFactor)) { -// positions[i * 3] += Math.sin(audioFactor) * 0.02; // Bump particles slightly -// positions[i * 3 + 1] += Math.sin(audioFactor) * 0.02; -// positions[i * 3 + 2] += Math.cos(audioFactor) * 0.02; -// } -// } - -// particles.geometry.attributes.position.needsUpdate = true; // Update positions -// } - -// controls.update(); // Update OrbitControls -// renderer.render(scene, camera); -// animationIdRef.current = requestAnimationFrame(animate); -// }; - -// animate(); - -// // Clean up -// return () => { -// cancelAnimationFrame(animationIdRef.current); // Cancel animation loop -// if (rendererRef.current) { -// rendererRef.current.dispose(); // Clean up renderer -// } -// }; -// }, []); // Note: This runs only once - -// // Toggle play/pause -// const togglePlay = () => { -// setIsPlaying(!isPlaying); -// }; - -// return ( -//
-// -//
-// ); -// }; - -// export default ThreeJSVisualizer; - -// import React, { useRef, useEffect, useState } from "react"; -// import * as THREE from "three"; -// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; -// import * as Tone from "tone"; - // const ThreeJSVisualizer = () => { // const mountRef = useRef(null); // const [isPlaying, setIsPlaying] = useState(false);