import React, { useRef, useEffect } from 'react'
import * as THREE from 'three'
interface CityscapeBackgroundProps {
className?: string
}
export function CityscapeBackground({ className }: CityscapeBackgroundProps) {
const canvasRef = useRef<HTMLCanvasElement>(null)
const sceneRef = useRef<THREE.Scene>()
const rendererRef = useRef<THREE.WebGLRenderer>()
const cameraRef = useRef<THREE.PerspectiveCamera>()
const animationIdRef = useRef<number>()
const speedLinesRef = useRef<THREE.LineSegments>()
const mouseRef = useRef(new THREE.Vector2())
const startTimeRef = useRef<number>(Date.now())
useEffect(() => {
if (!canvasRef.current) {
console.log('CityscapeBackground: Canvas ref not available')
return
}
console.log('FuturistBackground: Initializing 3D futurist scene')
// Scene setup with futurist art movement atmosphere
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x000000) // Black background
scene.fog = new THREE.Fog(0x000000, 30, 120) // Black fog for depth
// Camera setup for isometric view
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200)
camera.position.set(30, 25, 30)
camera.lookAt(0, 0, 0)
// Renderer setup
const renderer = new THREE.WebGLRenderer({
canvas: canvasRef.current,
antialias: false, // Disable for better performance
alpha: false // Disable alpha for opaque background
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)) // Limit pixel ratio for performance
// Store references
sceneRef.current = scene
rendererRef.current = renderer
cameraRef.current = camera
// Futurist art movement lighting - dramatic contrasts inspired by paintings
const ambientLight = new THREE.AmbientLight(0x1a1a1a, 0.4) // Warm grey ambient
scene.add(ambientLight)
// Bold primary light - warm like industrial sunlight
const primaryLight = new THREE.DirectionalLight(0xffaa33, 1.8) // Golden orange
primaryLight.position.set(-25, 35, 20)
scene.add(primaryLight)
// Dynamic red light for energy and motion
const dynamicLight = new THREE.DirectionalLight(0xdd2222, 1.2) // Bold red
dynamicLight.position.set(20, 10, -15)
scene.add(dynamicLight)
// Contrasting blue for depth and drama
const contrastLight = new THREE.PointLight(0x2244bb, 0.8, 50) // Deep blue
contrastLight.position.set(-30, 5, 0)
scene.add(contrastLight)
// Yellow accent for vibrant highlights
const accentLight = new THREE.PointLight(0xdddd22, 0.7, 40) // Yellow
accentLight.position.set(25, 20, -5)
scene.add(accentLight)
// Green industrial light
const industrialLight = new THREE.PointLight(0x22aa22, 0.6, 45) // Industrial green
industrialLight.position.set(0, -5, 30)
scene.add(industrialLight)
// Create speed lines
createSpeedLines()
console.log('FuturistBackground: Dynamic futurist art created, starting animation')
// Reset start time
startTimeRef.current = Date.now()
// Animation loop
const animate = () => {
animationIdRef.current = requestAnimationFrame(animate)
const time = Date.now() * 0.001 // Convert to seconds for smoother animation
// Animate speed lines
animateSpeedLines(time)
// Apply interactive effects
applyFuturistInteractions()
// Dramatic camera movement inspired by futurist dynamism
const cameraSpeed = time * 0.2
camera.position.x = 20 + Math.sin(cameraSpeed * 1.3) * 12 + Math.cos(cameraSpeed * 0.7) * 6
camera.position.y = 15 + Math.cos(cameraSpeed * 0.9) * 8 + Math.sin(cameraSpeed * 1.1) * 4
camera.position.z = 25 + Math.sin(cameraSpeed * 0.6) * 15 + Math.cos(cameraSpeed * 1.4) * 8
// Dynamic look-at point for more dramatic perspective shifts
const lookAtTarget = new THREE.Vector3(
Math.sin(cameraSpeed * 0.8) * 5,
Math.cos(cameraSpeed * 0.5) * 3,
Math.sin(cameraSpeed * 1.2) * 8
)
camera.lookAt(lookAtTarget)
renderer.render(scene, camera)
}
animate()
// Mouse tracking for interactive effects
const handleMouseMove = (event: MouseEvent) => {
// Convert screen coordinates to normalized device coordinates (-1 to +1)
mouseRef.current.set(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1
)
}
// Handle window resize
const handleResize = () => {
if (camera && renderer) {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}
}
window.addEventListener('mousemove', handleMouseMove)
window.addEventListener('resize', handleResize)
// Cleanup
return () => {
if (animationIdRef.current) {
cancelAnimationFrame(animationIdRef.current)
}
window.removeEventListener('mousemove', handleMouseMove)
window.removeEventListener('resize', handleResize)
// Dispose of Three.js objects
scene.clear()
renderer.dispose()
}
}, [])
const applyFuturistInteractions = () => {
const camera = cameraRef.current!
const raycaster = new THREE.Raycaster()
// Convert mouse coordinates to world position
raycaster.setFromCamera(mouseRef.current, camera)
// Interactive speed line distortion
if (speedLinesRef.current) {
const positions = speedLinesRef.current.geometry.attributes.position.array as Float32Array
for (let i = 0; i < positions.length; i += 6) { // Step by 6 for line pairs
const linePos = new THREE.Vector3(positions[i], positions[i + 1], positions[i + 2])
const mouseWorldPos = new THREE.Vector3()
raycaster.ray.at(linePos.z, mouseWorldPos)
const distance = linePos.distanceTo(mouseWorldPos)
const distortRadius = 15
if (distance < distortRadius) {
const distortStrength = (distortRadius - distance) / distortRadius
// Create dramatic wave distortion around mouse
const waveX = Math.sin(Date.now() * 0.02 + i) * distortStrength * 2.0
const waveY = Math.cos(Date.now() * 0.025 + i) * distortStrength * 1.5
positions[i] += waveX
positions[i + 1] += waveY
positions[i + 3] += waveX * 0.8 // End point follows with slight lag
positions[i + 4] += waveY * 0.8
}
}
speedLinesRef.current.geometry.attributes.position.needsUpdate = true
}
}
const createSpeedLines = () => {
const scene = sceneRef.current!
// Create sharp, dramatic speed lines
const motionVertices = []
const motionColors = []
// High-contrast speed colors
const speedColors = [
{ r: 1.0, g: 1.0, b: 1.0 }, // Brilliant white
{ r: 1.0, g: 0.1, b: 0.1 }, // Sharp red
{ r: 1.0, g: 0.8, b: 0.0 }, // Electric yellow
{ r: 0.0, g: 1.0, b: 1.0 }, // Cyan
{ r: 1.0, g: 0.0, b: 1.0 }, // Magenta
]
// Create 300 sharp speed lines for intense motion
for (let i = 0; i < 300; i++) {
// Start point - spread across space
const startX = (Math.random() - 0.5) * 100
const startY = (Math.random() - 0.5) * 40
const startZ = Math.random() * -200
// End point - long streaks suggesting extreme speed
const endX = startX + (Math.random() - 0.5) * 20
const endY = startY + (Math.random() - 0.5) * 8
const endZ = startZ + 20 + Math.random() * 40 // Longer streaks
motionVertices.push(startX, startY, startZ)
motionVertices.push(endX, endY, endZ)
// High-contrast colors for sharp appearance
const colorIndex = Math.floor(Math.random() * speedColors.length)
const color = speedColors[colorIndex]
motionColors.push(color.r, color.g, color.b)
motionColors.push(color.r, color.g, color.b)
}
const motionGeometry = new THREE.BufferGeometry()
motionGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(motionVertices), 3))
motionGeometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(motionColors), 3))
const motionMaterial = new THREE.LineBasicMaterial({
vertexColors: true,
transparent: true,
opacity: 0.9,
linewidth: 2
})
const speedLines = new THREE.LineSegments(motionGeometry, motionMaterial)
speedLinesRef.current = speedLines
scene.add(speedLines)
}
const animateSpeedLines = (time: number) => {
if (!speedLinesRef.current) return
const positions = speedLinesRef.current.geometry.attributes.position.array as Float32Array
for (let i = 0; i < positions.length; i += 6) { // Step by 6 since we have line pairs
// Extreme speed effect - lines blazing toward camera
positions[i + 2] += 6.0 + Math.sin(time * 2 + i) * 3.0 // High variable speed
positions[i + 5] += 6.0 + Math.sin(time * 2 + i) * 3.0 // End point matches
// Intense lateral movement for speed blur
const lateralMotion = Math.sin(time * 1.5 + i * 0.15) * 0.8
positions[i] += lateralMotion
positions[i + 3] += lateralMotion
// Sharp vertical oscillation for dynamic energy
const verticalMotion = Math.cos(time * 2.2 + i * 0.12) * 0.6
positions[i + 1] += verticalMotion
positions[i + 4] += verticalMotion
// Reset lines that have blazed past camera
if (positions[i + 2] > 100) {
positions[i + 2] = -250 - Math.random() * 100
positions[i + 5] = positions[i + 2] + 20 + Math.random() * 40
positions[i] = (Math.random() - 0.5) * 100
positions[i + 1] = (Math.random() - 0.5) * 40
positions[i + 3] = positions[i] + (Math.random() - 0.5) * 20
positions[i + 4] = positions[i + 1] + (Math.random() - 0.5) * 8
}
}
speedLinesRef.current.geometry.attributes.position.needsUpdate = true
// Rapid rotation for intense motion blur
speedLinesRef.current.rotation.x += 0.008
speedLinesRef.current.rotation.y += 0.012
speedLinesRef.current.rotation.z += 0.025
}
return (
<canvas
ref={canvasRef}
className={className}
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0,
pointerEvents: 'auto',
opacity: 1,
visibility: 'visible',
}}
/>
)
}
