GLM 5.3 Flash

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Low-Poly Campfire at Night</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#06080f}
  canvas{display:block}
</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>
<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(0x06080f);
scene.fog = new THREE.Fog(0x06080f, 18, 70);

const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 300);
camera.position.set(9, 5.5, 9);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.6, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.06;
controls.minDistance = 4;
controls.maxDistance = 26;
controls.maxPolarAngle = Math.PI/2 - 0.06; // stay above ground
controls.minPolarAngle = 0.15;
controls.update();

// ---- lights ----
scene.add(new THREE.AmbientLight(0x223355, 0.55));
const moonLight = new THREE.DirectionalLight(0x8899cc, 0.55);
moonLight.position.set(-18, 24, -10);
moonLight.castShadow = true;
moonLight.shadow.mapSize.set(1024,1024);
moonLight.shadow.camera.left = -25; moonLight.shadow.camera.right = 25;
moonLight.shadow.camera.top = 25; moonLight.shadow.camera.bottom = -25;
scene.add(moonLight);

const fireLight = new THREE.PointLight(0xff8a33, 3.2, 30, 2);
fireLight.position.set(0, 1.6, 0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.set(1024,1024);
fireLight.shadow.bias = -0.004;
scene.add(fireLight);

// ---- ground ----
const ground = new THREE.Mesh(
  new THREE.CircleGeometry(60, 24),
  new THREE.MeshStandardMaterial({color:0x1d2b1e, flatShading:true})
);
ground.rotation.x = -Math.PI/2;
ground.receiveShadow = true;
scene.add(ground);

// subtle terrain bumps (distant mounds)
const bumpMat = new THREE.MeshStandardMaterial({color:0x18251a, flatShading:true});
for(let i=0;i<14;i++){
  const a = Math.random()*Math.PI*2, r = 30+Math.random()*20;
  const m = new THREE.Mesh(new THREE.ConeGeometry(3+Math.random()*4, 1.5+Math.random()*3, 5), bumpMat);
  m.position.set(Math.cos(a)*r, 0, Math.sin(a)*r);
  scene.add(m);
}

// glowing ember ring near fire
const embers = new THREE.Mesh(
  new THREE.CircleGeometry(1.5, 10),
  new THREE.MeshBasicMaterial({color:0xff5a1a})
);
embers.rotation.x = -Math.PI/2; embers.position.y = 0.02;
scene.add(embers);

// ---- stones ring + rocks ----
const rockMat = new THREE.MeshStandardMaterial({color:0x55606a, flatShading:true});
function rock(x,z,s){
  const m = new THREE.Mesh(new THREE.DodecahedronGeometry(s, 0), rockMat);
  m.position.set(x, s*0.4, z);
  m.rotation.set(Math.random()*3, Math.random()*3, Math.random()*3);
  m.castShadow = m.receiveShadow = true;
  scene.add(m);
  return m;
}
for(let i=0;i<10;i++){
  const a = i/10*Math.PI*2;
  rock(Math.cos(a)*1.05, Math.sin(a)*1.05, 0.22+Math.random()*0.12);
}
for(let i=0;i<8;i++){
  const a = Math.random()*Math.PI*2, r = 4+Math.random()*7;
  rock(Math.cos(a)*r, Math.sin(a)*r, 0.4+Math.random()*0.7);
}

// ---- logs ----
const logMat = new THREE.MeshStandardMaterial({color:0x4a3524, flatShading:true});
function log(x,z,rot,len=1.4){
  const m = new THREE.Mesh(new THREE.CylinderGeometry(0.16,0.2,len,6), logMat);
  m.position.set(x,0.2,z);
  m.rotation.set(Math.PI/2, 0, rot);
  m.castShadow = m.receiveShadow = true;
  scene.add(m);
}
log(0.5,0.4,0.5); log(-0.5,0.3,-0.6); log(0.1,-0.6,1.4);
for(let i=0;i<6;i++){
  const a=Math.random()*Math.PI*2, r=2.5+Math.random()*4;
  log(Math.cos(a)*r, Math.sin(a)*r, Math.random()*Math.PI, 1.2+Math.random()*1.2);
}

// ---- trees ----
const trunkMat = new THREE.MeshStandardMaterial({color:0x3a2a1c, flatShading:true});
const leafMats = [
  new THREE.MeshStandardMaterial({color:0x1e3d24, flatShading:true}),
  new THREE.MeshStandardMaterial({color:0x254b2c, flatShading:true}),
  new THREE.MeshStandardMaterial({color:0x183020, flatShading:true}),
];
function tree(x,z,s){
  const g = new THREE.Group();
  const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.14*s,0.22*s,1.2*s,5), trunkMat);
  trunk.position.y = 0.6*s; trunk.castShadow = true;
  g.add(trunk);
  let y = 1.0*s;
  for(let i=0;i<3;i++){
    const c = new THREE.Mesh(new THREE.ConeGeometry((1.1-i*0.3)*s, 1.1*s, 6),
      leafMats[(Math.random()*3)|0]);
    c.position.y = y; y += 0.55*s;
    c.rotation.y = Math.random()*Math.PI;
    c.castShadow = true;
    g.add(c);
  }
  g.position.set(x,0,z);
  scene.add(g);
}
let placed = 0, guard = 0;
while(placed < 42 && guard++ < 800){
  const a = Math.random()*Math.PI*2, r = 6.5 + Math.pow(Math.random(),0.8)*30;
  const x = Math.cos(a)*r, z = Math.sin(a)*r;
  if(Math.hypot(x,z) < 6) continue;
  tree(x, z, 0.8 + Math.random()*1.4);
  placed++;
}

// ---- campfire flame ----
const flameGroup = new THREE.Group();
flameGroup.position.y = 0.35;
scene.add(flameGroup);
const flameLayers = [];
const flameCols = [0xff3d00, 0xff7a1a, 0xffc23d];
for(let i=0;i<3;i++){
  const f = new THREE.Mesh(
    new THREE.ConeGeometry(0.5-i*0.14, 1.3-i*0.25, 6),
    new THREE.MeshBasicMaterial({color:flameCols[i], transparent:true, opacity:0.85-i*0.12})
  );
  f.position.y = 0.5 + i*0.28;
  flameGroup.add(f);
  flameLayers.push(f);
}

// ---- sparks ----
const N = 160;
const sPos = new Float32Array(N*3), sVel = new Float32Array(N*3), sLife = new Float32Array(N);
for(let i=0;i<N;i++){
  sPos[i*3] = (Math.random()-0.5)*0.5;
  sPos[i*3+1] = 0.6+Math.random();
  sPos[i*3+2] = (Math.random()-0.5)*0.5;
  sVel[i*3] = (Math.random()-0.5)*0.4;
  sVel[i*3+1] = 1.2+Math.random()*1.6;
  sVel[i*3+2] = (Math.random()-0.5)*0.4;
  sLife[i] = Math.random();
}
const sGeo = new THREE.BufferGeometry();
sGeo.setAttribute('position', new THREE.BufferAttribute(sPos,3));
const sparks = new THREE.Points(sGeo, new THREE.PointsMaterial({
  color:0xffb347, size:0.09, transparent:true, opacity:0.95,
  blending:THREE.AdditiveBlending, depthWrite:false
}));
scene.add(sparks);

// ---- sky: stars + moon ----
const starGeo = new THREE.BufferGeometry();
const sp = new Float32Array(900*3);
for(let i=0;i<900;i++){
  const th = Math.random()*Math.PI*2, ph = Math.random()*Math.PI*0.48, r = 160;
  sp[i*3] = r*Math.sin(ph)*Math.cos(th);
  sp[i*3+1] = r*Math.cos(ph)+10;
  sp[i*3+2] = r*Math.sin(ph)*Math.sin(th);
}
starGeo.setAttribute('position', new THREE.BufferAttribute(sp,3));
scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({color:0xcdd8ff, size:0.7, sizeAttenuation:false, fog:false})));

const moon = new THREE.Mesh(
  new THREE.IcosahedronGeometry(6,1),
  new THREE.MeshBasicMaterial({color:0xdfe6ff, fog:false})
);
moon.position.set(-45, 55, -70);
scene.add(moon);
const moonHalo = new THREE.Mesh(
  new THREE.IcosahedronGeometry(8.5,1),
  new THREE.MeshBasicMaterial({color:0x8fa0d8, transparent:true, opacity:0.25, fog:false})
);
moonHalo.position.copy(moon.position);
scene.add(moonHalo);

// ---- animation ----
const clock = new THREE.Clock();
function tick(){
  requestAnimationFrame(tick);
  const t = clock.getElapsedTime();

  flameLayers.forEach((f,i)=>{
    f.scale.set(1+0.15*Math.sin(t*9+i*2), 0.8+0.35*Math.sin(t*11+i*1.7)+0.1*Math.sin(t*23+i), 1+0.15*Math.cos(t*8+i));
    f.rotation.y = t*(1.5+i*0.7);
  });
  fireLight.intensity = 2.6 + Math.sin(t*9)*0.5 + Math.sin(t*23.7)*0.3 + Math.random()*0.25;
  fireLight.position.y = 1.6 + Math.sin(t*7)*0.12;
  embers.material.color.setHSL(0.05, 1, 0.35+0.12*Math.sin(t*6));

  const p = sGeo.attributes.position.array;
  for(let i=0;i<N;i++){
    sLife[i] += 0.016;
    if(sLife[i] > 1){
      sLife[i] = 0;
      p[i*3] = (Math.random()-0.5)*0.4;
      p[i*3+1] = 0.6;
      p[i*3+2] = (Math.random()-0.5)*0.4;
      sVel[i*3] = (Math.random()-0.5)*0.4 + 0.3; // drift
      sVel[i*3+1] = 1.2+Math.random()*1.6;
      sVel[i*3+2] = (Math.random()-0.5)*0.4;
    }
    p[i*3]   += sVel[i*3]*0.016;
    p[i*3+1] += sVel[i*3+1]*0.016;
    p[i*3+2] += sVel[i*3+2]*0.016;
    sVel[i*3+1] *= 0.995;
  }
  sGeo.attributes.position.needsUpdate = true;
  sparks.material.opacity = 0.9;

  moonHalo.scale.setScalar(1+0.04*Math.sin(t*1.5));
  controls.update();
  renderer.render(scene, camera);
}
tick();

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