Cyberpunk Basketball Court

Basketball Physics: Every dribble creates: - A subtle light ripple spreading across court surface - A quick radial wave distortion in air (heat distortion effect) - Small light particles scatter outward from impact point Important Note: The character doesn't need to be a full animated model - if it's easier, this can be a static character model with just the visor animation and ball movement. The court and environment effects are the main focus. 3D rendering style should be sleek, with shiny surfaces and plenty of glowing elements. Cyberpunk Basketball Court import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { FXAAShader } from 'three/addons/shaders/FXAAShader.js'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 15); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // Post-processing const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85 ); bloomPass.threshold = 0; bloomPass.strength = 1.5; bloomPass.radius = 0.5; composer.addPass(bloomPass); const fxaaPass = new ShaderPass(FXAAShader); fxaaPass.material.uniforms['resolution'].value.set( 1 / window.innerWidth, 1 / window.innerHeight ); composer.addPass(fxaaPass); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxPolarAngle = Math.PI * 0.45; controls.minDistance = 5; controls.maxDistance = 30; // Create floating basketball court function createCourt() { // Court geometry const courtGeometry = new THREE.PlaneGeometry(20, 30); // Custom shader material for the court const courtMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; uniform vec2 resolution; varying vec2 vUv; void main() { vec2 uv = vUv * 10.0; vec2 grid = abs(fract(uv - 0.5) - 0.5) / fwidth(uv); float line = min(grid.x, grid.y); // Animated circuit lines float circuit = sin(uv.x * 5.0 + time) * sin(uv.y * 3.0 + time * 1.3); circuit = smoothstep(0.2, 0.25, abs(circuit)); vec3 color = mix( vec3(0.05, 0.1, 0.2), vec3(0.0, 0.8, 1.0), circuit * line ); gl_FragColor = vec4(color, 0.8 - line * 0.5); } `, transparent: true, side: THREE.DoubleSide }); const court = new THREE.Mesh(courtGeometry, courtMaterial); court.rotation.x = -Math.PI / 2; court.receiveShadow = true; // Add borders const borderMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.7 }); const borders = [ new THREE.Mesh(new THREE.BoxGeometry(22, 0.5, 1), borderMaterial), new THREE.Mesh(new THREE.BoxGeometry(22, 0.5, 1), borderMaterial), new THREE.Mesh(new THREE.BoxGeometry(1, 0.5, 30), borderMaterial), new THREE.Mesh(new THREE.BoxGeometry(1, 0.5, 30), borderMaterial) ]; borders[0].position.set(0, 0.01, 15.5); borders[1].position.set(0, 0.01, -15.5); borders[2].position.set(10.5, 0.01, 0); borders[3].position.set(-10.5, 0.01, 0); const courtGroup = new THREE.Group(); courtGroup.add(court); borders.forEach(border => courtGroup.add(border)); return courtGroup; } const court = createCourt(); scene.add(court); // City skyline (simplified for now) function createCitySkyline() { const city = new THREE.Group(); const buildings = []; const buildingColors = [ 0x0066ff, 0x00aaff, 0x0077cc, 0x0055aa, 0x003388 ]; for (let i = 0; i < 100; i++) { const width = 0.5 + Math.random() * 2; const depth = 0.5 + Math.random() * 2; const height = 2 + Math.random() * 15; const geometry = new THREE.BoxGeometry(width, height, depth); const color = buildingColors[Math.floor(Math.random() * buildingColors.length)]; const material = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.5 }); const building = new THREE.Mesh(geometry, material); building.castShadow = true; // Position buildings in a circle below the court const angle = Math.random() * Math.PI * 2; const radius = 20 + Math.random() * 30; building.position.set( Math.cos(angle) * radius, -30 + height * 0.5, Math.sin(angle) * radius ); city.add(building); buildings.push(building); } return city; } const city = createCitySkyline(); scene.add(city); // Spotlights function createSpotlights() { const lights = new THREE.Group(); const positions = [ { x: 5, y: 10, z: 0 }, { x: -5, y: 10, z: 0 }, { x: 0, y: 10, z: 8 }, { x: 0, y: 10, z: -8 } ]; positions.forEach(pos => { const light = new THREE.SpotLight(0x00aaff, 30, 30, Math.PI * 0.15, 0.5); light.position.set(pos.x, pos.y, pos.z); light.target.position.set(0, 0, 0); light.castShadow = true; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; // Light helper const helper = new THREE.SpotLightHelper(light); lights.add(light); lights.add(light.target); lights.add(helper); // Volumetric light const geometry = new THREE.ConeGeometry(5, 20, 64, 1, true); const material = new THREE.MeshPhongMaterial({ color: 0x00aaff, emissive: 0x00aaff, emissiveIntensity: 0.2, side: THREE.BackSide, transparent: true, opacity: 0.1 }); const cone = new THREE.Mesh(geometry, material); cone.position.set(pos.x, pos.y - 10, pos.z); cone.lookAt(0, 0, 0); cone.rotation.x -= Math.PI; lights.add(cone); }); return lights; } const spotlights = createSpotlights(); scene.add(spotlights); // Basketball player (simplified placeholder) function createPlayer() { const player = new THREE.Group(); // Body (simplified) const bodyGeom = new THREE.CylinderGeometry(0.5, 0.5, 1.8, 8); const bodyMat = new THREE.MeshStandardMaterial({ color: 0x4444ff, emissive: 0x0000ff, emissiveIntensity: 0.2 }); const body = new THREE.Mesh(bodyGeom, bodyMat); body.position.y = 0.9; player.add(body); // Head with visor const headGeom = new THREE.SphereGeometry(0.4, 16, 16); const headMat = new THREE.MeshStandardMaterial({ color: 0x000022, emissive: 0x0044ff, emissiveIntensity: 0.5 }); const head = new THREE.Mesh(headGeom, headMat); head.position.y = 1.7; player.add(head); // Visor animation const visorGeom = new THREE.PlaneGeometry(0.5, 0.3); const visorMat = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.7 }); const visor = new THREE.Mesh(visorGeom, visorMat); visor.position.set(0.3, 1.7, 0); visor.rotation.y = Math.PI / 2; player.add(visor); // Glowing basketball const ballGeom = new THREE.SphereGeometry(0.3, 32, 32); const ballMat = new THREE.MeshStandardMaterial({ color: 0xff6600, emissive: 0xff3300, emissiveIntensity: 0.5, roughness: 0.1, metalness: 0.7 }); const ball = new THREE.Mesh(ballGeom, ballMat); ball.position.set(0, 0.5, 0.5); player.add(ball); // Create line segments for code tattoos const numLines = 30; const lineMat = new THREE.LineBasicMaterial({ color: 0x00ffff, linewidth: 2, transparent: true, opacity: 0.8 }); for (let i = 0; i < numLines; i++) { const points = []; points.push(new THREE.Vector3( Math.random() * 0.5 - 0.25, Math.random() * 1.8, Math.random() * 0.5 - 0.25 + 0.5 )); points.push(new THREE.Vector3( Math.random() * 0.5 - 0.25, Math.random() * 1.8, Math.random() * 0.5 - 0.25 + 0.5 )); const lineGeom = new THREE.BufferGeometry().setFromPoints(points); const line = new THREE.Line(lineGeom, lineMat); player.add(line); } // Animation properties player.userData = { ball: ball, visor: visor, dribbleTime: 0, lastDribble: 0, lookingUp: false }; return player; } const player = createPlayer(); player.position.y = 0.1; // Slightly above court player.lookAt(new THREE.Vector3(0, 0.2, 1)); scene.add(player); // Particle system for dribble effects function createParticleSystem() { const particles = new THREE.BufferGeometry(); const particleCount = 500; const positions = new Float32Array(particleCount * 3); const sizes = new Float32Array(particleCount); for (let i = 0; i < particleCount; i++) { positions[i * 3] = 0; positions[i * 3 + 1] = 0; positions[i * 3 + 2] = 0; sizes[i] = 0.1 + Math.random() * 0.1; } particles.setAttribute('position', new THREE.BufferAttribute(positions, 3)); particles.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const particleMaterial = new THREE.PointsMaterial({ color: 0x00ffff, size: 0.1, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending }); const particleSystem = new THREE.Points(particles, particleMaterial); particleSystem.visible = false; return particleSystem; } const particles = createParticleSystem(); scene.add(particles); // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); const time = clock.getElapsedTime(); // Update court shader if (court.children[0].material.uniforms) { court.children[0].material.uniforms.time.value = time; } // Animate player player.userData.dribbleTime += delta; // Dribble animation if (player.userData.dribbleTime > 2 && time - player.userData.lastDribble > 1.5) { player.userData.lastDribble = time; player.userData.dribbleTime = 0; // Trigger dribble effects triggerDribbleEffects(); // Make player look at camera briefly if (!player.userData.lookingUp) { player.userData.lookingUp = true; setTimeout(() => { player.userData.lookingUp = false; }, 500); } } // Basketball bounce animation if (player.userData.dribbleTime < 0.5) { const bounceHeight = Math.sin(player.userData.dribbleTime * Math.PI * 2) * 0.5; player.userData.ball.position.y = 0.5 + bounceHeight; player.userData.ball.scale.setScalar(1 + bounceHeight * 0.2); } // Visor flash effect if (player.userData.lookingUp) { const intensity = Math.sin(time * 10) * 0.5 + 0.5; player.userData.visor.material.opacity = 0.7 + intensity * 0.3; } else { player.userData.visor.material.opacity = 0.7; } // Rotate city buildings slowly city.rotation.y += 0.001; // Update controls controls.update(); // Render with post-processing composer.render(); } function triggerDribbleEffects() { // Show particles particles.visible = true; // Animate particles const positions = particles.geometry.attributes.position.array; for (let i = 0; i < positions.length / 3; i++) { // Spread particles in all directions from the ball const angle = Math.random() * Math.PI * 2; const speed = 0.5 + Math.random() * 1; positions[i * 3] = Math.cos(angle) * speed; positions[i * 3 + 1] = Math.random() * speed * 2; positions[i * 3 + 2] = Math.sin(angle) * speed; } particles.geometry.attributes.position.needsUpdate = true; // Hide particles after delay setTimeout(() => { particles.visible = false; }, 500); // Create ripple on court surface // (This would be implemented with a custom shader) } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); fxaaPass.material.uniforms.resolution.value.set( 1 / window.innerWidth, 1 / window.innerHeight ); }); animate();