MiniMax M3.1 Flash

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonlit Campfire</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #05070f; }
  canvas { display: block; }
  #hud {
    position: fixed; left: 18px; bottom: 16px; color: #cfe3ff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(6, 10, 20, .45); border: 1px solid rgba(160, 200, 255, .18);
    padding: 8px 12px; border-radius: 6px; pointer-events: none;
    backdrop-filter: blur(4px);
  }
  #title {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
    color: #dce9ff; font-family: Georgia, serif; font-size: 15px; letter-spacing: .3em;
    text-transform: uppercase; opacity: .85; pointer-events: none; text-shadow: 0 2px 10px #000;
    white-space: nowrap;
  }
</style>
<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>
</head>
<body>
<div id="title">Whispering Pines</div>
<div id="hud">Drag to orbit &nbsp;•&nbsp; Scroll to zoom</div>

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

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x060a16);
scene.fog = new THREE.FogExp2(0x081020, 0.021);

const camera = new THREE.PerspectiveCamera(52, innerWidth / innerHeight, 0.1, 300);
camera.position.set(13, 8.5, 17);

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.15;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 2.2, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.minDistance = 8;
controls.maxDistance = 48;
controls.minPolarAngle = 0.18;
controls.maxPolarAngle = Math.PI / 2 - 0.06;
controls.maxAzimuthAngle = Infinity;
controls.update();

// ---------- Lights ----------
const hemi = new THREE.HemisphereLight(0x3a5580, 0x0a0d12, 0.55);
scene.add(hemi);

const moonLight = new THREE.DirectionalLight(0x9fbaff, 0.55);
moonLight.position.set(-18, 28, -14);
moonLight.castShadow = true;
moonLight.shadow.mapSize.set(1024, 1024);
moonLight.shadow.camera.left = -30;
moonLight.shadow.camera.right = 30;
moonLight.shadow.camera.top = 30;
moonLight.shadow.camera.bottom = -30;
moonLight.shadow.camera.far = 80;
moonLight.shadow.bias = -0.0008;
scene.add(moonLight);

const fireLight = new THREE.PointLight(0xff8a2b, 9, 30, 1.7);
fireLight.position.set(0, 2.1, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024, 1024);
fireLight.shadow.camera.near = 0.3;
fireLight.shadow.camera.far = 28;
fireLight.shadow.bias = -0.004;
scene.add(fireLight);

const fillLight = new THREE.PointLight(0x6688cc, 1.2, 60);
fillLight.position.set(10, 6, -12);
scene.add(fillLight);

// ---------- Ground ----------
function seededRandom(seed) {
  let s = seed;
  return function() {
    s |= 0; s = s + 0x6D2B79F5 | 0;
    let t = Math.imul(s ^ s >>> 15, 1 | s);
    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  };
}
const rand = seededRandom(1337);

const groundGeo = new THREE.PlaneGeometry(180, 180, 36, 36);
groundGeo.rotateX(-Math.PI / 2);
const gp = groundGeo.attributes.position;
for (let i = 0; i < gp.count; i++) {
  const x = gp.getX(i), z = gp.getZ(i);
  const d = Math.sqrt(x*x + z*z);
  const noise = (rand() - 0.5) * (1.2 + d * 0.05);
  gp.setY(i, noise * (d > 10 ? 1.6 : 0.7));
}
groundGeo.computeVertexNormals();
const groundMat = new THREE.MeshStandardMaterial({
  color: 0x1a2618, roughness: 1, metalness: 0, flatShading: true
});
const ground = new THREE.Mesh(groundGeo, groundMat);
ground.receiveShadow = true;
scene.add(ground);

// Clearing patch
const clearing = new THREE.Mesh(
  new THREE.CircleGeometry(9.5, 40),
  new THREE.MeshStandardMaterial({ color: 0x2c2a1c, roughness: 1, flatShading: true })
);
clearing.rotation.x = -Math.PI / 2;
clearing.position.y = 0.02;
clearing.receiveShadow = true;
scene.add(clearing);

// ---------- Materials ----------
const trunkMat = new THREE.MeshStandardMaterial({ color: 0x3a281c, roughness: 1, flatShading: true });
const leafMats = [
  new THREE.MeshStandardMaterial({ color: 0x163522, roughness: 1, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0x1b4329, roughness: 1, flatShading: true }),
  new THREE.MeshStandardMaterial({ color: 0x12301e, roughness: 1, flatShading: true })
];
const rockMat = new THREE.MeshStandardMaterial({ color: 0x4a4d52, roughness: 0.95, flatShading: true });
const logMat = new THREE.MeshStandardMaterial({ color: 0x4b3322, roughness: 1, flatShading: true });

// ---------- Trees ----------
function makeTree(x, z, scale) {
  const g = new THREE.Group();
  const h = (5 + rand() * 4) * scale;

  const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.16*scale, 0.28*scale, h, 6), trunkMat);
  trunk.position.y = h / 2;
  trunk.castShadow = true;
  trunk.receiveShadow = true;
  g.add(trunk);

  const layers = 3;
  for (let i = 0; i < layers; i++) {
    const r = (2.1 - i * 0.5) * scale;
    const lh = 3.2 * scale;
    const y = h * 0.45 + i * 1.9 * scale;
    const cone = new THREE.Mesh(
      new THREE.ConeGeometry(r, lh, 7),
      leafMats[Math.floor(rand() * leafMats.length)]
    );
    cone.position.y = y;
    cone.rotation.y = rand() * Math.PI;
    cone.castShadow = true;
    cone.receiveShadow = true;
    g.add(cone);
  }
  g.position.set(x, 0, z);
  g.rotation.y = rand() * Math.PI * 2;
  scene.add(g);
}

// Ring of trees with random placement, keeping fire clear
for (let i = 0; i < 46; i++) {
  const a = rand() * Math.PI * 2;
  const r = 13 + Math.pow(rand(), 0.7) * 32;
  const x = Math.cos(a) * r;
  const z = Math.sin(a) * r;
  makeTree(x, z, 0.75 + rand() * 0.75);
}

// A few nearer trees framing the clearing
const nearSpots = [
  [-10, 6], [11, 7], [-8, -10], [9, -11], [-14, -3], [14, 2]
];
nearSpots.forEach(([x, z]) => makeTree(x, z, 1.05 + rand() * 0.4));

// ---------- Rocks ----------
function makeRock(x, z, s) {
  const rock = new THREE.Mesh(new THREE.DodecahedronGeometry(s, 0), rockMat);
  rock.position.set(x, s * 0.42, z);
  rock.rotation.set(rand() * 3, rand() * 3, rand() * 3);
  rock.scale.set(1 + rand() * 0.6, 0.6 + rand() * 0.4, 1 + rand() * 0.5);
  rock.castShadow = true;
  rock.receiveShadow = true;
  scene.add(rock);
}
for (let i = 0; i < 18; i++) {
  const a = rand() * Math.PI * 2;
  const r = 5 + rand() * 12;
  makeRock(Math.cos(a) * r, Math.sin(a) * r, 0.4 + rand() * 1.1);
}

// Fire ring stones
for (let i = 0; i < 9; i++) {
  const a = (i / 9) * Math.PI * 2;
  makeRock(Math.cos(a) * 1.25, Math.sin(a) * 1.25, 0.34);
}

// ---------- Logs ----------
function makeLog(x, z, len, radius, rotY) {
  const log = new THREE.Mesh(new THREE.CylinderGeometry(radius, radius * 0.85, len, 7), logMat);
  log.position.set(x, radius * 0.8, z);
  log.rotation.z = Math.PI / 2;
  log.rotation.y = rotY;
  log.castShadow = true;
  log.receiveShadow = true;
  scene.add(log);
}
makeLog(0, 0, 2.6, 0.2, 0.35);
makeLog(0.25, 0.1, 2.2, 0.17, 2.5);
makeLog(2.6, 1.6, 2.4, 0.22, 0.8);
makeLog(-2.4, 1.9, 2.0, 0.19, -0.4);
makeLog(2.2, -2.3, 2.5, 0.21, 1.4);

// ---------- Flames ----------
const flameGroup = new THREE.Group();
flameGroup.position.set(0, 0.25, 0);
scene.add(flameGroup);

const flameMeshes = [];
const flameDefs = [
  { x: 0, z: 0, h: 2.5, r: 0.72, c: 0xff5a00 },
  { x: 0.35, z: 0.15, h: 1.9, r: 0.5, c: 0xffa000 },
  { x: -0.32, z: -0.12, h: 1.7, r: 0.45, c: 0xff7b00 },
  { x: 0.05, z: 0.4, h: 1.3, r: 0.36, c: 0xffcf3a },
  { x: -0.15, z: 0.3, h: 1.0, r: 0.3, c: 0xfff09a }
];
flameDefs.forEach((d, i) => {
  const geo = new THREE.ConeGeometry(d.r, d.h, 6, 1);
  const mat = new THREE.MeshBasicMaterial({
    color: d.c, transparent: true, opacity: 0.9,
    blending: THREE.AdditiveBlending, depthWrite: false
  });
  const m = new THREE.Mesh(geo, mat);
  m.position.set(d.x, d.h / 2, d.z);
  m.userData = { baseH: d.h, baseY: d.h / 2, phase: rand() * 10, speed: 4 + rand() * 3, i };
  m.renderOrder = 3;
  flameGroup.add(m);
  flameMeshes.push(m);
});

// Glowing embers at base
const ember = new THREE.Mesh(
  new THREE.SphereGeometry(0.55, 10, 8),
  new THREE.MeshBasicMaterial({ color: 0xff3c00, transparent: true, opacity: 0.55, blending: THREE.AdditiveBlending, depthWrite: false })
);
ember.position.y = 0.35;
ember.scale.y = 0.45;
flameGroup.add(ember);

// ---------- Sparks particle system ----------
const SPARK_COUNT = 120;
const sparkPos = new Float32Array(SPARK_COUNT * 3);
const sparkData = [];
for (let i = 0; i < SPARK_COUNT; i++) {
  const d = {
    x: (rand() - 0.5) * 1.1,
    z: (rand() - 0.5) * 1.1,
    y: rand() * 5,
    speed: 0.8 + rand() * 1.6,
    drift: (rand() - 0.5) * 0.5,
    life: rand() * 5
  };
  sparkData.push(d);
  sparkPos[i*3] = d.x;
  sparkPos[i*3+1] = d.y;
  sparkPos[i*3+2] = d.z;
}
const sparkGeo = new THREE.BufferGeometry();
sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos, 3));
const sparkMat = new THREE.PointsMaterial({
  color: 0xffb347, size: 0.09, transparent: true, opacity: 0.95,
  blending: THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true
});
const sparks = new THREE.Points(sparkGeo, sparkMat);
sparks.renderOrder = 4;
scene.add(sparks);

// ---------- Stars ----------
const starCount = 900;
const starPos = new Float32Array(starCount * 3);
const starSizes = new Float32Array(starCount);
for (let i = 0; i < starCount; i++) {
  const theta = rand() * Math.PI * 2;
  const phi = Math.acos(rand() * 0.95);
  const r = 120;
  starPos[i*3] = r * Math.sin(phi) * Math.cos(theta);
  starPos[i*3+1] = r * Math.cos(phi) + 2;
  starPos[i*3+2] = r * Math.sin(phi) * Math.sin(theta);
  starSizes[i] = rand() < 0.05 ? 2.4 : (rand() < 0.2 ? 1.4 : 0.8);
}
const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
starGeo.setAttribute('size', new THREE.BufferAttribute(starSizes, 1));
const starMat = new THREE.PointsMaterial({
  color: 0xcfe4ff, size: 0.55, transparent: true, opacity: 0.9, sizeAttenuation: true
});
scene.add(new THREE.Points(starGeo, starMat));

// ---------- Moon ----------
const moon = new THREE.Mesh(
  new THREE.SphereGeometry(4.2, 24, 20),
  new THREE.MeshBasicMaterial({ color: 0xf2f5ff, fog: false })
);
moon.position.set(-42, 40, -70);
scene.add(moon);

const moonGlow = new THREE.Mesh(
  new THREE.SphereGeometry(6.2, 20, 16),
  new THREE.MeshBasicMaterial({ color: 0x8fb4ff, transparent: true, opacity: 0.12, fog: false, blending: THREE.AdditiveBlending, depthWrite: false })
);
moonGlow.position.copy(moon.position);
scene.add(moonGlow);

// ---------- Animation ----------
const clock = new THREE.Clock();
function animate() {
  const t = clock.getElapsedTime();

  // Flame animation
  flameMeshes.forEach((m) => {
    const u = m.userData;
    const f = Math.sin(t * u.speed + u.phase);
    const f2 = Math.sin(t * u.speed * 1.7 + u.phase * 2.3);
    m.scale.set(0.9 + f * 0.12, 1 + f2 * 0.16, 0.9 + f * 0.12);
    m.position.x = Math.sin(t * 2.1 + u.phase) * 0.08;
    m.position.z = Math.cos(t * 1.7 + u.phase) * 0.08;
    m.rotation.z = Math.sin(t * 3 + u.phase) * 0.08;
    m.material.opacity = 0.72 + 0.25 * (0.5 + 0.5 * f);
  });

  // Flickering fire light
  const flick = 0.82 + Math.sin(t * 13.7) * 0.09 + Math.sin(t * 27.3) * 0.06 + Math.sin(t * 41.1) * 0.03;
  fireLight.intensity = 9.5 * flick;
  fireLight.position.x = Math.sin(t * 5.1) * 0.12;
  fireLight.position.z = Math.cos(t * 4.3) * 0.12;
  ember.material.opacity = 0.45 + flick * 0.22;

  // Sparks
  const pos = sparkGeo.attributes.position.array;
  for (let i = 0; i < SPARK_COUNT; i++) {
    const d = sparkData[i];
    d.y += d.speed * 0.016;
    d.life += 0.016;
    if (d.y > 6.5 || d.life > 5.5) {
      d.y = 0.3;
      d.life = 0;
      d.x = (rand() - 0.5) * 1.0;
      d.z = (rand() - 0.5) * 1.0;
    }
    pos[i*3] = d.x + Math.sin(t * 1.5 + i) * 0.25 * (d.y / 5);
    pos[i*3+1] = d.y;
    pos[i*3+2] = d.z + Math.cos(t * 1.3 + i * 0.7) * 0.25 * (d.y / 5);
  }
  sparkGeo.attributes.position.needsUpdate = true;

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

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
});
</script>
</body>
</html>