3D PlayCanvas Platformer

body,
             html {
                 margin: 0;
                 padding: 0;
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                 background-color: #1a1a24;
             }

#application {
                 width: 100%;
                 height: 100%;
                 display: block;
             }

#hud {
                 position: absolute;
                 top: 20px;
                 left: 20px;
                 color: #ffffff;
                 text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
                 pointer-events: none;
                 background: rgba(0, 0, 0, 0.5);
                 padding: 15px 20px;
                 border-radius: 8px;
                 border-left: 4px solid #ffd700;
             }

h1 {
                 margin: 0 0 5px 0;
                 font-size: 1.3rem;
                 color: #ffd700;
             }

p {
                 margin: 5px 0;
                 font-size: 0.9rem;
             }

#win-msg {
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 color: #ffd700;
                 font-size: 2.5rem;
                 font-weight: bold;
                 text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
                 display: none;
                 background: rgba(0, 0, 0, 0.85);
                 padding: 20px 40px;
                 border-radius: 12px;
                 text-align: center;
                 border: 2px solid #ffd700;
             }

#win-msg span {
                 font-size: 1.1rem;
                 color: #ffffff;
                 display: block;
                 margin-top: 10px;
             }

// 1. Initialize Application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas, {
            keyboard: new pc.Keyboard(window),
            mouse: new pc.Mouse(canvas)
        });

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);
        window.addEventListener('resize', () => app.resizeCanvas());

// Dark stormy ambient light
        app.scene.ambientColor = new pc.Color(0.08, 0.1, 0.15);

const platforms = [];

// 2. Define Custom PlayCanvas Scripts

// --- STORM WEATHER, SPLASH, & LIGHTNING SYSTEM SCRIPT ---
        const WeatherSystem = pc.createScript('weatherSystem');

WeatherSystem.prototype.initialize = function() {
            // A. Rain setup
            this.rainCount = 100;
            this.rainParticles = [];
            this.windSpeed = -2.5;

const rainMat = new pc.StandardMaterial();
            rainMat.diffuse = new pc.Color(0, 0.8, 1);
            rainMat.emissive = new pc.Color(0, 0.4, 0.8);
            rainMat.blendType = pc.BLEND_NORMAL;
            rainMat.opacity = 0.5;
            rainMat.update();

for (let i = 0; i < this.rainCount; i++) {
                const rainStreak = new pc.Entity();
                rainStreak.addComponent('render', {
                    type: 'box',
                    material: rainMat,
                    castShadows: false,
                    receiveShadows: false
                });

rainStreak.setLocalScale(0.04, 0.6 + Math.random() * 0.4, 0.04);
                this.resetRaindrop(rainStreak, true);
                
                this.app.root.addChild(rainStreak);
                this.rainParticles.push(rainStreak);
            }

// B. Splash ripples setup
            this.maxSplashes = 40;
            this.splashes = [];

for (let i = 0; i < this.maxSplashes; i++) {
                const splashMat = new pc.StandardMaterial();
                splashMat.diffuse = new pc.Color(0, 0.8, 1);
                splashMat.emissive = new pc.Color(0, 0.5, 0.9);
                splashMat.blendType = pc.BLEND_NORMAL;
                splashMat.opacity = 0.0;
                splashMat.update();

const splashEntity = new pc.Entity();
                splashEntity.addComponent('render', {
                    type: 'cylinder',
                    material: splashMat,
                    castShadows: false,
                    receiveShadows: false
                });
                
                splashEntity.setLocalScale(0.1, 0.01, 0.1);
                splashEntity.enabled = false;
                this.app.root.addChild(splashEntity);

this.splashes.push({
                    entity: splashEntity,
                    material: splashMat,
                    active: false,
                    age: 0,
                    maxAge: 0.22
                });
            }

// C. Procedural Lightning Bolt Setup
            this.boltSegments = [];
            this.boltSegmentCount = 6; // Number of zig-zag segments per bolt

const boltMat = new pc.StandardMaterial();
            boltMat.diffuse = new pc.Color(1, 0.9, 0.2); // Golden yellow
            boltMat.emissive = new pc.Color(1, 0.8, 0.1); // Warm internal glow
            boltMat.update();

for (let i = 0; i < this.boltSegmentCount; i++) {
                const segment = new pc.Entity();
                segment.addComponent('render', {
                    type: 'cylinder',
                    material: boltMat,
                    castShadows: false,
                    receiveShadows: false
                });
                segment.enabled = false;
                this.app.root.addChild(segment);
                this.boltSegments.push(segment);
            }

// D. Scene lighting references
            this.cameraEntity = this.app.root.findByName('Camera');
            this.sunEntity = this.app.root.findByName('Sun');

this.origAmbient = this.app.scene.ambientColor.clone();
            this.origClearColor = this.cameraEntity.camera.clearColor.clone();
            this.origSunColor = this.sunEntity.light.color.clone();
            this.origSunIntensity = this.sunEntity.light.intensity;

// Cooldown timers
            this.lightningTimer = 0;
            this.lightningMaxDuration = 0.65;
            this.lightningCooldown = 3 + Math.random() * 3; // First flash within 3-6 seconds
            this.lightningColor = new pc.Color(0.65, 0.75, 0.95);
            this.wasFlashActive = false;
        };

WeatherSystem.prototype.resetRaindrop = function(drop, initialSpawn = false) {
            const rx = (Math.random() - 0.5) * 35;
            const rz = (Math.random() - 0.5) * 25 - 8;
            const ry = initialSpawn ? (Math.random() * 15) : (10 + Math.random() * 4);
            
            drop.setPosition(rx, ry, rz);
            drop.fallSpeed = 13 + Math.random() * 5;
        };

WeatherSystem.prototype.spawnSplash = function(x, y, z) {
            for (let i = 0; i < this.maxSplashes; i++) {
                const splash = this.splashes[i];
                if (!splash.active) {
                    splash.active = true;
                    splash.age = 0;
                    splash.entity.enabled = true;
                    
                    splash.entity.setPosition(x, y + 0.02, z);
                    splash.entity.setLocalScale(0.1, 0.01, 0.1);
                    splash.material.opacity = 0.5;
                    splash.material.update();
                    break;
                }
            }
        };

// Aligns a cylinder segment perfectly between two 3D vector coordinates
        WeatherSystem.prototype.alignSegment = function(entity, p1, p2) {
            // Find vector midpoint
            const mid = new pc.Vec3().add2(p1, p2).scale(0.5);
            entity.setPosition(mid);

// Set height to distance, and X/Z to thin width
            const dist = p1.distance(p2);
            entity.setLocalScale(0.12, dist, 0.12);

// Orient the cylinder to point toward the target node
            entity.lookAt(p2);
            entity.rotateLocal(90, 0, 0); // Correct cylinder's default vertical alignment
        };

// Generates a random zig-zag path of 3D points and stretches our pooled cylinders to fit them
        WeatherSystem.prototype.triggerBolt = function() {
            const startX = (Math.random() - 0.5) * 26; // Spawn wide
            const startZ = (Math.random() - 0.5) * 16 - 7; // Align to platform path

const points = [];
            let currentX = startX;
            let currentZ = startZ;
            let currentY = 16; // Start high in the clouds

points.push(new pc.Vec3(currentX, currentY, currentZ));

for (let j = 1; j <= this.boltSegmentCount; j++) {
                currentY -= 16 / this.boltSegmentCount;

// Stagger coordinates horizontally to make the lightning jagged
                currentX += (Math.random() - 0.5) * 3.5;
                currentZ += (Math.random() - 0.5) * 3.5;

points.push(new pc.Vec3(currentX, currentY, currentZ));
            }

// Bind each physical cylinder segment to connect the generated nodes
            for (let j = 0; j < this.boltSegmentCount; j++) {
                const seg = this.boltSegments[j];
                this.alignSegment(seg, points[j], points[j+1]);
                seg.enabled = true;
            }
        };

WeatherSystem.prototype.hideBolt = function() {
            for (let i = 0; i < this.boltSegmentCount; i++) {
                this.boltSegments[i].enabled = false;
            }
        };

WeatherSystem.prototype.update = function(dt) {
            // A. Update Raindrops & Detect Collisions
            for (let i = 0; i < this.rainParticles.length; i++) {
                const drop = this.rainParticles[i];
                const pos = drop.getPosition();

const nextY = pos.y - (drop.fallSpeed * dt);
                const nextX = pos.x + (this.windSpeed * dt);

let hit = false;
                let hitY = 0;

for (let platform of platforms) {
                    const pPos = platform.getPosition();
                    const pScale = platform.getLocalScale();

const halfX = pScale.x / 2;
                    const halfZ = pScale.z / 2;
                    const topY = pPos.y + pScale.y / 2;

if (pos.x >= pPos.x - halfX && pos.x <= pPos.x + halfX &&
                        pos.z >= pPos.z - halfZ && pos.z <= pPos.z + halfZ) {
                        
                        if (pos.y >= topY && nextY <= topY) {
                            hit = true;
                            hitY = topY;
                            break;
                        }
                    }
                }

if (hit) {
                    this.spawnSplash(pos.x, hitY, pos.z);
                    this.resetRaindrop(drop, false);
                } else if (nextY < -4) {
                    this.resetRaindrop(drop, false);
                } else {
                    drop.setPosition(nextX, nextY, pos.z);
                }
            }

// B. Update Active Splash Ripples
            for (let i = 0; i < this.maxSplashes; i++) {
                const splash = this.splashes[i];
                if (splash.active) {
                    splash.age += dt;
                    const progress = splash.age / splash.maxAge;

if (progress >= 1) {
                        splash.active = false;
                        splash.entity.enabled = false;
                    } else {
                        const currentScale = 0.1 + (progress * 0.9);
                        splash.entity.setLocalScale(currentScale, 0.01, currentScale);
                        
                        splash.material.opacity = 0.5 * (1 - progress);
                        splash.material.update();
                    }
                }
            }

// C. Update Storm Lightning Flash
            if (this.lightningTimer > 0) {
                this.lightningTimer -= dt;
                this.wasFlashActive = true;

const t = 1.0 - (this.lightningTimer / this.lightningMaxDuration);
                let intensity = 0;

// Double-peak lightning waveform
                if (t < 0.15) {
                    intensity = t / 0.15;                 // 1. Pre-flicker spike
                } else if (t < 0.25) {
                    intensity = 1.0 - ((t - 0.15) / 0.10); // 2. Brief fade down
                } else if (t < 0.35) {
                    intensity = 0;                        // 3. Pause
                } else if (t < 0.50) {
                    intensity = (t - 0.35) / 0.15;        // 4. Main massive flash
                } else {
                    intensity = 1.0 - ((t - 0.50) / 0.50); // 5. Slow decay to dark
                }

// Hide the yellow bolt when entering the slow decay phase (t >= 0.50)
                if (t >= 0.50) {
                    this.hideBolt();
                }

// Interpolate colors of sky and ambient shadows
                this.app.scene.ambientColor.lerp(this.origAmbient, this.lightningColor, intensity);
                this.cameraEntity.camera.clearColor.lerp(this.origClearColor, this.lightningColor, intensity);
                
                // Boost main directional light and colors
                this.sunEntity.light.intensity = this.origSunIntensity + (intensity * 4.5); 
                this.sunEntity.light.color.lerp(this.origSunColor, this.lightningColor, intensity);

} else {
                // Return lighting precisely back to dark to avoid precision drift
                if (this.wasFlashActive) {
                    this.hideBolt(); // Safety hide
                    this.app.scene.ambientColor.copy(this.origAmbient);
                    this.cameraEntity.camera.clearColor.copy(this.origClearColor);
                    this.sunEntity.light.intensity = this.origSunIntensity;
                    this.sunEntity.light.color.copy(this.origSunColor);
                    this.wasFlashActive = false;
                }

// Count down to next lightning flash
                this.lightningCooldown -= dt;
                if (this.lightningCooldown <= 0) {
                    this.lightningTimer = this.lightningMaxDuration;
                    this.lightningCooldown = 5 + Math.random() * 8;
                    this.triggerBolt(); // Spawn the physical bolt
                }
            }
        };

// --- MOVEMENT & COLLISION SCRIPT ---
        const Movement = pc.createScript('movement');

Movement.prototype.initialize = function() {
            this.velocity = new pc.Vec3();
            this.gravity = -24;
            this.jumpForce = 11.5;
            this.speed = 6.2;
            this.isGrounded = false;
            this.won = false;
            
            this.winMsg = document.getElementById('win-msg');
        };

Movement.prototype.update = function(dt) {
            if (this.won) {
                if (this.app.keyboard.wasPressed(pc.KEY_R)) {
                    this.resetGame();
                }
                return;
            }

const keyboard = this.app.keyboard;
            let moveX = 0;
            let moveZ = 0;

if (keyboard.isPressed(pc.KEY_A) || keyboard.isPressed(pc.KEY_LEFT)) moveX = -1;
            if (keyboard.isPressed(pc.KEY_D) || keyboard.isPressed(pc.KEY_RIGHT)) moveX = 1;
            if (keyboard.isPressed(pc.KEY_W) || keyboard.isPressed(pc.KEY_UP)) moveZ = -1;
            if (keyboard.isPressed(pc.KEY_S) || keyboard.isPressed(pc.KEY_DOWN)) moveZ = 1;

this.velocity.x = moveX * this.speed;
            this.velocity.z = moveZ * this.speed;
            this.velocity.y += this.gravity * dt;

if (keyboard.wasPressed(pc.KEY_SPACE) && this.isGrounded) {
                this.velocity.y = this.jumpForce;
                this.isGrounded = false;
            }

const currentPos = this.entity.getPosition();
            const nextPos = currentPos.clone();
            nextPos.x += this.velocity.x * dt;
            nextPos.y += this.velocity.y * dt;
            nextPos.z += this.velocity.z * dt;

this.isGrounded = false;
            const radius = 0.5;

for (let platform of platforms) {
                const col = checkAABBCollision(nextPos, radius, platform);
                if (col.collided) {
                    const diffY = nextPos.y - col.nearestPoint.y;

if (this.velocity.y <= 0 && diffY > 0) {
                        nextPos.y = col.nearestPoint.y + radius;
                        this.velocity.y = 0;
                        this.isGrounded = true;
                    } else if (this.velocity.y > 0 && diffY < 0) {
                        nextPos.y = col.nearestPoint.y - radius;
                        this.velocity.y = 0;
                    } else {
                        const platPos = platform.getPosition();
                        if (Math.abs(nextPos.x - platPos.x) > Math.abs(nextPos.z - platPos.z)) {
                            nextPos.x = col.nearestPoint.x + (nextPos.x > col.nearestPoint.x ? radius : -radius);
                        } else {
                            nextPos.z = col.nearestPoint.z + (nextPos.z > col.nearestPoint.z ? radius : -radius);
                        }
                    }
                }
            }

if (nextPos.y < -12) {
                this.resetPlayer();
                return;
            }

this.entity.setPosition(nextPos);

const goalPos = goal.getPosition();
            if (nextPos.distance(goalPos) < 1.1) {
                this.won = true;
                this.winMsg.style.display = 'block';
            }
        };

Movement.prototype.resetPlayer = function() {
            this.entity.setPosition(0, 1.5, 0);
            this.velocity.set(0, 0, 0);
            this.isGrounded = false;
        };

Movement.prototype.resetGame = function() {
            this.won = false;
            this.winMsg.style.display = 'none';
            this.resetPlayer();
        };

// --- CAMERA FOLLOW SCRIPT ---
        const CameraFollow = pc.createScript('cameraFollow');

CameraFollow.prototype.initialize = function() {
            this.target = app.root.findByName('Player');
            this.offset = new pc.Vec3(0, 5, 10.5);
        };

CameraFollow.prototype.update = function(dt) {
            if (!this.target) return;

const targetPos = this.target.getPosition();
            const currentPos = this.entity.getPosition();

const desiredPos = targetPos.clone().add(this.offset);
            currentPos.lerp(currentPos, desiredPos, 6 * dt);
            this.entity.setPosition(currentPos);

this.entity.lookAt(targetPos.x, targetPos.y + 0.5, targetPos.z);
        };

// --- SPINNER SCRIPT ---
        const Spinner = pc.createScript('spinner');
        Spinner.prototype.update = function(dt) {
            this.entity.rotate(0, 95 * dt, 45 * dt);
        };

// 3. Collision Helper
        function checkAABBCollision(spherePos, sphereRadius, boxEntity) {
            const boxPos = boxEntity.getPosition();
            const boxScale = boxEntity.getLocalScale();

const minX = boxPos.x - boxScale.x / 2;
            const maxX = boxPos.x + boxScale.x / 2;
            const minY = boxPos.y - boxScale.y / 2;
            const maxY = boxPos.y + boxScale.y / 2;
            const minZ = boxPos.z - boxScale.z / 2;
            const maxZ = boxPos.z + boxScale.z / 2;

const x = Math.max(minX, Math.min(spherePos.x, maxX));
            const y = Math.max(minY, Math.min(spherePos.y, maxY));
            const z = Math.max(minZ, Math.min(spherePos.z, maxZ));

const distance = Math.sqrt(
                (x - spherePos.x) * (x - spherePos.x) +
                (y - spherePos.y) * (y - spherePos.y) +
                (z - spherePos.z) * (z - spherePos.z)
            );

if (distance < sphereRadius) {
                return {
                    collided: true,
                    nearestPoint: new pc.Vec3(x, y, z)
                };
            }
            return { collided: false };
        }

// 4. Construct Scene Elements

function createPlatform(x, y, z, sx, sy, sz, colorHex) {
            const platform = new pc.Entity();
            const material = new pc.StandardMaterial();
            material.diffuse = new pc.Color().fromString(colorHex);
            material.shininess = 32; 
            material.update();

platform.addComponent('render', {
                type: 'box',
                material: material,
                castShadows: true,
                receiveShadows: true
            });
            platform.setPosition(x, y, z);
            platform.setLocalScale(sx, sy, sz);
            app.root.addChild(platform);

platforms.push(platform);
            return platform;
        }

// Wet, neon-contrast colored platforms
        createPlatform(0, -0.25, 0, 8, 0.5, 8, '#1e2d24');      // Dark Forest Ground
        createPlatform(0, 1.25, -7, 3.5, 0.3, 3.5, '#cf5c36');   // Burnt Orange
        createPlatform(-4, 2.75, -11, 3, 0.3, 3, '#00b4d8');    // Electric Blue
        createPlatform(1, 4.25, -14, 2.5, 0.3, 2.5, '#ffd166');  // Amber Yellow
        createPlatform(5, 5.75, -10, 2.5, 0.3, 2.5, '#7209b7');  // Royal Purple
        createPlatform(2, 7.25, -5, 2.5, 0.3, 2.5, '#06d6a0');   // Bright Mint Goal Platform

// Goal Star/Gem
        const goal = new pc.Entity('Goal');
        const goldMat = new pc.StandardMaterial();
        goldMat.diffuse = new pc.Color().fromString('#ffd700');
        goldMat.emissive = new pc.Color().fromString('#ff9f00'); 
        goldMat.update();

goal.addComponent('render', {
            type: 'cone',
            material: goldMat,
            castShadows: true,
            receiveShadows: true
        });
        goal.setPosition(2, 8.5, -5);
        goal.setLocalScale(0.8, 1.2, 0.8);
        app.root.addChild(goal);

goal.addComponent('script');
        goal.script.create('spinner');

// Player Entity
        const player = new pc.Entity('Player');
        const playerMat = new pc.StandardMaterial();
        playerMat.diffuse = new pc.Color().fromString('#ef476f'); // High-vis pink/red
        playerMat.emissive = new pc.Color().fromString('#4a0d1d'); // Slight glow in the dark
        playerMat.shininess = 80;
        playerMat.update();

player.addComponent('render', {
            type: 'sphere',
            material: playerMat,
            castShadows: true,
            receiveShadows: true
        });
        player.setPosition(0, 1.5, 0);
        player.setLocalScale(1, 1, 1);
        app.root.addChild(player);

player.addComponent('script');
        player.script.create('movement');

// Setup Follow Camera
        const camera = new pc.Entity('Camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.08, 0.1, 0.15) // Rainy night sky color
        });
        camera.setPosition(0, 6, 11);
        app.root.addChild(camera);

camera.addComponent('script');
        camera.script.create('cameraFollow');

// Cool, blueish Moon/Storm light
        const sun = new pc.Entity('Sun');
        sun.addComponent('light', {
            type: 'directional',
            color: new pc.Color(0.6, 0.7, 0.85),
            castShadows: true,
            shadowBias: 0.05,
            shadowDistance: 32,
            shadowResolution: 1024
        });
        app.root.addChild(sun);
        sun.setEulerAngles(-55, 45, 0);

// Warm streetlight accent (adds cinematic lighting contrast)
        const streetAccent = new pc.Entity('StreetAccent');
        streetAccent.addComponent('light', {
            type: 'directional',
            color: new pc.Color(0.25, 0.2, 0.12),
            castShadows: false
        });
        app.root.addChild(streetAccent);
        streetAccent.setEulerAngles(40, -135, 0);

// Add the Weather Entity (Created last, so it can reference Camera and Sun)
        const weather = new pc.Entity('Weather');
        app.root.addChild(weather);
        weather.addComponent('script');
        weather.script.create('weatherSystem');

// 5. Run Game Loop
        app.start();

3D PlayCanvas Platformer

HTML

CSS

Javascript