LFM2.5-2.6B (free)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campfire at Night</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
        #info {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #fff;
            font-family: 'Segoe UI', sans-serif;
            font-size: 14px;
            pointer-events: none;
            text-shadow: 1px 1px 2px #000;
        }
    </style>
</head>
<body>
    <div id="info">Click or press a key to start</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';

        // Scene setup
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x0b102e); // Dark night sky

        // Camera
        const camera = new THREE.PerspectiveCamera(45, 1280/800, 0.1, 50);
        camera.position.set(8, 3, 8);

        // Renderer
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(1280, 800);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        document.body.appendChild(renderer.domElement);

        // Fog - fades distant trees
        scene.fog = new THREE.Fog(0x0b102e, 30, 80);

        // OrbitControls with position limits
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.positionLimits = {
            x: [-6, 6],
            y: [0, 6],
            z: [0, 12]
        };
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // --- Ground with low-poly rocks and logs ---
        const groundGeo = new THREE.PlaneGeometry(20, 20, 50, 50);
        const groundMat = new THREE.MeshStandardMaterial({
            color: 0x1a1a1a,
            roughness: 0.8,
            metalness: 0.1
        });
        const ground = new THREE.Mesh(groundGeo, groundMat);
        ground.rotation.x = -Math.PI / 2;
        ground.position.y = -0.5;
        scene.add(ground);

        // Low-poly rocks around the clearing
        const rockGeo = new THREE.IcosahedronGeometry(0.6, 0);
        const rockMat = new THREE.MeshStandardMaterial({
            color: 0x3d5a3d,
            roughness: 0.7,
            metalness: 0.2
        });
        const rocks = [];
        const rockCount = 8;
        for (let i = 0; i < rockCount; i++) {
            const angle = (i / rockCount) * Math.PI * 2;
            const radius = 2.5 + Math.random() * 1.5;
            const rock = new THREE.Mesh(rockGeo, rockMat);
            rock.position.set(
                Math.cos(angle) * radius,
                0,
                Math.sin(angle) * radius
            );
            scene.add(rock);
            rocks.push(rock);
        }

        // Low-poly logs (cylinders with caps)
        const logGeo = new THREE.CylinderGeometry(0.3, 0.5, 1.2, 8);
        const logMat = new THREE.MeshStandardMaterial({
            color: 0x8b7355,
            roughness: 0.6,
            metalness: 0.1
        });
        const logs = [];
        const logCount = 12;
        for (let i = 0; i < logCount; i++) {
            const angle = (i / logCount) * Math.PI * 2;
            const radius = 0.4 + Math.random() * 0.4;
            const height = 1.5 + Math.random() * 1;
            const log = new THREE.Mesh(logGeo, logMat);
            log.position.set(
                Math.cos(angle) * radius,
                height / 2,
                Math.sin(angle) * radius
            );
            log.rotation.x = -Math.PI / 2;
            scene.add(log);
            logs.push(log);
        }

        // --- Campfire ---
        const fireGroup = new THREE.Group();
        fireGroup.position.set(0, 1.2, 0);

        // Main fire sphere (low-poly style)
        const fireSphereGeo = new THREE.SphereGeometry(1.0, 32, 32);
        const fireMat = new THREE.MeshStandardMaterial({
            color: 0xff8c00,
            emissive: 0xff8c00,
            emissiveIntensity: 0.6,
            roughness: 0.3,
            metalness: 0.1
        });
        const fire = new THREE.Mesh(fireSphereGeo, fireMat);
        fireGroup.add(fire);

        // Flame mesh (animated)
        const flameGeo = new THREE.SphereGeometry(1.2, 16, 16);
        const flameMat = new THREE.MeshStandardMaterial({
            color: 0xff4500,
            emissive: 0xff4500,
            emissiveIntensity: 0.8,
            roughness: 0.2,
            metalness: 0.1
        });
        const flame = new THREE.Mesh(flameGeo, flameMat);
        flameGroup.add(flame);

        // Flickering light on fire
        const lightGeo = new THREE.SphereGeometry(0.15, 16, 16);
        const lightMat = new THREE.PointLight(0xfff0c0, 3, 30);
        const flickeringLight = new THREE.PointLight(0xfff0c0, 2, 50);
        flickeringLight.position.set(0, 0.5, 0);
        scene.add(lightGeo); // dummy for position
        scene.add(flickeringLight);

        // Animate flames
        const frame = 0;
        function animateFlames() {
            const t = frame % 60;
            // Pulse the flame
            const pulse = Math.sin(t * 0.2) * 0.1;
            flame.rotation.x = t * 0.3;
            flame.rotation.y = t * 0.2;
            fire.scale.setScalar(1 + pulse * 0.1);
            scene.render();
            frame++;
            requestAnimationFrame(animateFlames);
        }
        animateFlames();

        // Sparks particle system
        const sparksCount = 80;
        const sparksGeo = new THREE.BufferGeometry();
        const sparksPos = new Float32Array(sparksCount * 3);
        const sparksColor = new Float32Array(sparksCount * 3);

        for (let i = 0; i < sparksCount; i++) {
            const angle = (i / sparksCount) * Math.PI * 2;
            const distance = 2 + Math.random() * 5;
            const z = -distance * Math.sin(angle);
            const x = distance * Math.cos(angle);
            sparksPos[i * 3] = x;
            sparksPos[i * 3 + 1] = 0;
            sparksPos[i * 3 + 2] = -z;
            // Warm spark colors
            const r = 1.0 + Math.random() * 0.5;
            const g = Math.random() * 0.2;
            const b = 0.3 + Math.random() * 0.5;
            sparksColor[i * 3] = r;
            sparksColor[i * 3 + 1] = g;
            sparksColor[i * 3 + 2] = b;
        }
        sparksGeo.setAttribute('position', new THREE.BufferAttribute(sparksPos, 3));
        sparksGeo.setAttribute('color', new THREE.BufferAttribute(sparksColor, 3));

        const sparksMat = new THREE.PointsMaterial({
            size: 0.05,
            vertexColors: true,
            transparent: true,
            opacity: 0.8,
            sizeAttenuation: true
        });
        const sparks = new THREE.Points(sparksGeo, sparksMat);
        scene.add(sparks);

        // Update flickering light position
        flickeringLight.position.x = Math.sin(frame * 0.5) * 0.3;
        flickeringLight.position.z = Math.cos(frame * 0.5) * 0.3;

        // --- Trees (30+ low-poly) ---
        const treeGeo = new THREE.ConeGeometry(0.4, 1.5, 8);
        const treeMat = new THREE.MeshStandardMaterial({
            color: 0x5a8a3c,
            roughness: 0.6,
            metalness: 0.2
        });

        const treeCount = 35;
        for (let i = 0; i < treeCount; i++) {
            // Random position in clearing (avoid fire area)
            let pos;
            do {
                pos = new THREE.Vector3(
                    (Math.random() - 0.5) * 6,
                    0.5,
                    (Math.random() - 0.5) * 6
                );
            } while (Math.sqrt(pos.x * pos.x + pos.z * pos.z) < 2.5 || pos.x > 2.5 || pos.x < -2.5);

            const tree = new THREE.Mesh(treeGeo, treeMat);
            tree.position.set(pos.x, pos.y, pos.z);
            scene.add(tree);
        }

        // --- Stars in sky ---
        const starCount = 200;
        const starGeo = new THREE.SphereGeometry(0.02, 2, 2);
        const stars = [];
        for (let i = 0; i < starCount; i++) {
            const radius = 0.01 + Math.random() * 0.02;
            const pos = new THREE.Vector3(
                (Math.random() - 0.5) * 40,
                0,
                (Math.random() - 0.5) * 40
            );
            const star = new THREE.Mesh(starGeo, new THREE.MeshStandardMaterial({
                color: 0xffffff,
                emissive: 0xffffff,
                emissiveIntensity: 0.5,
                roughness: 0.3,
                metalness: 0.1
            }));
            star.position.copy(pos);
            scene.parallelTransport(star, [0, 0, 0]); // center in sky
            stars.push(star);
        }

        // Moon
        const moonGeo = new THREE.SphereGeometry(0.8, 16, 16);
        const moonMat = new THREE.MeshStandardMaterial({
            color: 0xfff5e6,
            emissive: 0xfff5e6,
            emissiveIntensity: 0.4,
            roughness: 0.3,
            metalness: 0.1
        });
        const moon = new THREE.Mesh(moonGeo, moonMat);
        moon.position.set(6, 1.5, 4);
        scene.add(moon);

        // --- Moon glow ---
        const moonGlow = new THREE.SphereGeometry(1.2, 16, 16);
        const glowMat = new THREE.ShaderMaterial({
            uniforms: {
                time: { value: new THREE.Clock() }
            },
            vertexShader: `
                varying vec3 vNormal;
                void main() {
                    vNormal = normalize(normalMatrix * normal);
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `,
            fragmentShader: `
                uniform float time;
                varying vec3 vNormal;
                void main() {
                    float dist = length(gl_PointCoord - vec2(0.5));
                    if (dist > 0.5) discard;
                    float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
                    vec3 color = vec3(0xfff0c0, 0xffffff, 0xffe0a0);
                    gl_FragColor = vec4(color * alpha, alpha * 0.8);
                }
            `,
            transparent: true,
            side: THREE.BackSide,
            blending: THREE.AdditiveBlending
        });
        const moonGlow = new THREE.Mesh(moonGloGeo, moonGlow);
        scene.add(moonGlow);

        // --- Lighting ---
        // Ambient light for the night scene
        const ambientLight = new THREE.AmbientLight(0x1a1a2e, 0.3);
        scene.add(ambientLight);

        // Directional light from above (simulating moonlight)
        const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
        dirLight.position.set(5, 10, 5);
        scene.add(dirLight);

        // Point light for fire (flickering)
        const fireLight = new THREE.PointLight(0xff8c00, 5, 3);
        fireLight.position.set(0, 1.5, 0);
        scene.add(fireLight);

        // --- Controls ---
        controls.update();

        // Resize handler
        window.addEventListener('resize', () => {
            camera.aspect = 1280 / 800;
            camera.updateProjectionMatrix();
            renderer.setSize(1280, 800);
        });

        // Start animation loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>