Gemma 4 31B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Low Poly Campfire Night</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #050508; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        canvas { display: block; }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #ddd;
            pointer-events: none;
            text-shadow: 1px 1px 2px black;
        }
        .hint {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: rgba(255,255,255,0.6);
            font-size: 14px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="ui">
        <h1 style="margin:0; font-size: 24px;">Midnight Clearing</h1>
        <p style="margin:5px 0;">Low-Poly Ambient Scene</p>
    </div>
    <div class="hint">Drag to rotate • Scroll to zoom</div>

    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
        }
    }
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // --- Setup ---
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x020205);
        scene.fog = new THREE.FogExp2(0x020205, 0.07);

        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(8, 5, 8);

        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);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.maxPolarAngle = Math.PI / 2.1; // Stop camera from going underground
        controls.minDistance = 4;
        controls.maxDistance = 25;

        // --- Lighting ---
        const ambientLight = new THREE.AmbientLight(0x101020, 0.5);
        scene.add(ambientLight);

        const moonLight = new THREE.DirectionalLight(0x445577, 0.3);
        moonLight.position.set(10, 20, 10);
        scene.add(moonLight);

        // Fire Light
        const fireLight = new THREE.PointLight(0xff6600, 4, 15);
        fireLight.position.set(0, 0.5, 0);
        fireLight.castShadow = true;
        fireLight.shadow.mapSize.width = 512;
        fireLight.shadow.mapSize.height = 512;
        scene.add(fireLight);

        // --- Environment ---
        
        // Ground
        const groundGeo = new THREE.PlaneGeometry(50, 50);
        const groundMat = new THREE.MeshStandardMaterial({ color: 0x1a2a1a, roughness: 0.8 });
        const ground = new THREE.Mesh(groundGeo, groundMat);
        ground.rotation.x = -Math.PI / 2;
        ground.receiveShadow = true;
        scene.add(ground);

        // Low Poly Trees
        function createTree(x, z) {
            const group = new THREE.Group();
            
            // Trunk
            const trunkGeo = new THREE.CylinderGeometry(0.2, 0.3, 1.5, 6);
            const trunkMat = new THREE.MeshStandardMaterial({ color: 0x3d2817 });
            const trunk = new THREE.Mesh(trunkGeo, trunkMat);
            trunk.position.y = 0.75;
            trunk.castShadow = true;
            trunk.receiveShadow = true;
            group.add(trunk);

            // Leaves (Conical)
            const leavesMat = new THREE.MeshStandardMaterial({ color: 0x1a3a1a, flatShading: true });
            for(let i=0; i<3; i++) {
                const leavesGeo = new THREE.ConeGeometry(1.2 - i*0.3, 1.5, 6);
                const leaves = new THREE.Mesh(leavesGeo, leavesMat);
                leaves.position.y = 1.5 + i * 0.8;
                leaves.castShadow = true;
                leaves.receiveShadow = true;
                group.add(leaves);
            }

            group.position.set(x, 0, z);
            scene.add(group);
        }

        // Distribute trees randomly, avoiding the center
        for(let i=0; i<40; i++) {
            const angle = Math.random() * Math.PI * 2;
            const dist = 6 + Math.random() * 15;
            createTree(Math.cos(angle) * dist, Math.sin(angle) * dist);
        }

        // Rocks and Logs
        function createRock(x, z) {
            const geo = new THREE.DodecahedronGeometry(0.3 + Math.random() * 0.4, 0);
            const mat = new THREE.MeshStandardMaterial({ color: 0x555555 });
            const rock = new THREE.Mesh(geo, mat);
            rock.position.set(x, 0.2, z);
            rock.rotation.set(Math.random(), Math.random(), Math.random());
            rock.castShadow = true;
            rock.receiveShadow = true;
            scene.add(rock);
        }

        function createLog(x, z) {
            const geo = new THREE.CylinderGeometry(0.15, 0.15, 1.2, 6);
            const mat = new THREE.MeshStandardMaterial({ color: 0x4b3621 });
            const log = new THREE.Mesh(geo, mat);
            log.position.set(x, 0.15, z);
            log.rotation.set(Math.random() * 0.5, Math.random() * Math.PI, Math.random() * 0.5);
            log.castShadow = true;
            log.receiveShadow = true;
            scene.add(log);
        }

        // Scatter debris around the fire
        for(let i=0; i<8; i++) {
            const angle = Math.random() * Math.PI * 2;
            const dist = 1.5 + Math.random() * 2;
            createRock(Math.cos(angle)*dist, Math.sin(angle)*dist);
            createLog(Math.cos(angle+1)*dist, Math.sin(angle+1)*dist);
        }

        // --- Campfire ---
        
        // Firewood logs in the center
        const woodGroup = new THREE.Group();
        for(let i=0; i<4; i++) {
            const log = new THREE.Mesh(
                new THREE.CylinderGeometry(0.1, 0.1, 0.8, 6),
                new THREE.MeshStandardMaterial({ color: 0x4b3621 })
            );
            log.rotation.set(0, 0, (i * Math.PI/2) + 0.5);
            log.position.y = 0.1;
            log.castShadow = true;
            woodGroup.add(log);
        }
        scene.add(woodGroup);

        // Animated Flame
        const flameGeo = new THREE.ConeGeometry(0.3, 0.8, 6);
        const flameMat = new THREE.MeshStandardMaterial({ 
            color: 0xff4400, 
            emissive: 0xff2200, 
            emissiveIntensity: 2 
        });
        const flame = new THREE.Mesh(flameGeo, flameMat);
        flame.position.y = 0.4;
        scene.add(flame);

        // Sparks Particle System
        const sparkCount = 20;
        const sparksGeo = new THREE.BufferGeometry();
        const sparksPos = new Float32Array(sparkCount * 3);
        const sparksVel = [];
        
        for(let i=0; i<sparkCount; i++) {
            sparksPos[i*3] = 0;
            sparksPos[i*3+1] = 0.5;
            sparksPos[i*3+2] = 0;
            sparksVel.push(new THREE.Vector3(
                (Math.random() - 0.5) * 0.02, 
                0.05 + Math.random() * 0.05, 
                (Math.random() - 0.5) * 0.02
            ));
        }
        sparksGeo.setAttribute('position', new THREE.BufferAttribute(sparksPos, 3));
        const sparksMat = new THREE.PointsMaterial({ color: 0xffaa00, size: 0.05 });
        const sparks = new THREE.Points(sparksGeo, sparksMat);
        scene.add(sparks);

        // --- Sky/Stars ---
        const starGeo = new THREE.BufferGeometry();
        const starPos = new Float32Array(1000 * 3);
        for(let i=0; i<1000 * 3; i++) {
            starPos[i] = (Math.random() - 0.5) * 100;
        }
        starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
        const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
        const starField = new THREE.Points(starGeo, starMat);
        scene.add(starField);

        const moonGeo = new THREE.SphereGeometry(0.5, 8, 8);
        const moonMat = new THREE.MeshStandardMaterial({ color: 0xeeeeee, emissive: 0xaaaaaa });
        const moon = new THREE.Mesh(moonGeo, moonMat);
        moon.position.set(20, 20, -20);
        scene.add(moon);

        // --- Animation loop ---
        let time = 0;
        function animate() {
            time += 0.05;
            requestAnimationFrame(animate);

            // Flicker fire light
            fireLight.intensity = 3 + Math.sin(time * 4) * 1 + Math.random() * 0.5;
            
            // Animate flame size/tilt
            flame.scale.set(
                1 + Math.sin(time * 5) * 0.1,
                1 + Math.cos(time * 6) * 0.2,
                1 + Math.sin(time * 5) * 0.1
            );
            flame.rotation.z = Math.sin(time * 3) * 0.1;

            // Animate sparks
            const positions = sparks.geometry.attributes.position.array;
            for(let i=0; i<sparkCount; i++) {
                positions[i*3] += sparksVel[i].x;
                positions[i*3+1] += sparksVel[i].y;
                positions[i*3+2] += sparksVel[i].z;

                // Reset spark if it goes too high or falls
                if(positions[i*3+1] > 3 || Math.random() > 0.98) {
                    positions[i*3] = 0;
                    positions[i*3+1] = 0.5;
                    positions[i*3+2] = 0;
                    sparksVel[i].set(
                        (Math.random() - 0.5) * 0.02, 
                        0.05 + Math.random() * 0.05, 
                        (Math.random() - 0.5) * 0.02
                    );
                }
            }
            sparks.geometry.attributes.position.needsUpdate = true;

            controls.update();
            renderer.render(scene, camera);
        }

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate();
    </script>
</body>
</html>