[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import Component from "../particle-floor" export default function Page() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "@/app/globals.css" import { GeistMono } from "geist/font/mono" import { ThemeProvider } from "@/components/theme-provider" export const metadata = { title: "Particle Floor Animation", description: "Interactive particle floor with wave motion control", } export default function RootLayout({ children }) { return ( {children} ) } [V0_FILE]typescriptreact:file="particle-floor.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef, useMemo, useState } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import * as THREE from "three" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { GeistMono } from "geist/font/mono" export default function Component() { const [waveIntensity, setWaveIntensity] = useState(1) return (

Wave motion intensity setWaveIntensity(value[0])} className="my-4" />

) } function ParticleFloor({ waveIntensity }) { const points = useRef() // Create a grid of particles const particles = useMemo(() => { const temp = [] const size = 100 // Size of the grid const density = 0.5 // Density of particles for (let x = 0; x < size; x += density) { for (let z = 0; z < size; z += density) { // Initial position const position = new THREE.Vector3( x - size / 2, // Center the grid 0, // Start at y=0 z - size / 2, // Center the grid ) // Store original x and z for wave animation temp.push({ position, originalX: position.x, originalZ: position.z, }) } } return temp }, []) // Create positions array for the BufferGeometry const positions = useMemo(() => { return new Float32Array(particles.length * 3) }, [particles]) // Animation useFrame(({ clock }) => { const time = clock.getElapsedTime() particles.forEach((particle, i) => { // Wave animation with intensity control const waveX = Math.sin(particle.originalX * 0.3 + time * 2) * 0.2 * waveIntensity const waveZ = Math.cos(particle.originalZ * 0.2 + time * 1.5) * 0.2 * waveIntensity // Update particle position with wave particle.position.y = waveX + waveZ // Apply 45-degree angle rotation (around X axis) const rotatedY = particle.position.y * Math.cos(Math.PI / 4) - particle.originalZ * Math.sin(Math.PI / 4) const rotatedZ = particle.position.y * Math.sin(Math.PI / 4) + particle.originalZ * Math.cos(Math.PI / 4) // Update the positions array positions[i * 3] = particle.originalX positions[i * 3 + 1] = rotatedY positions[i * 3 + 2] = rotatedZ }) // Update the geometry points.current.geometry.attributes.position.needsUpdate = true }) return ( ) }

About

Tags

Share

About

Tags

Share

More from markri1

More Templates Like This

About

Tags

Share

About

Tags

Share

More from markri1

More Templates Like This