gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Low‑Poly Campfire</title>
<style>
  body{margin:0;overflow:hidden;background:#000;}
  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";

let scene, camera, renderer, controls;
let fireLight, flameMesh, sparkPoints;
let clock = new THREE.Clock();

init();
animate();

function init() {
  // Scene & Fog
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2(0x111111, 0.015);

  // Camera
  camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 200);
  camera.position.set(0, 10, 20);

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

  // Controls
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.maxPolarAngle = Math.PI/2 - 0.1; // stay above ground
  controls.minDistance = 5;
  controls.maxDistance = 60;

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

  // Simple low‑poly tree function
  const treeGeom = new THREE.ConeGeometry(0.5,2,4);
  const trunkGeom = new THREE.CylinderGeometry(0.2,0.2,1,4);
  const leafMat = new THREE.MeshStandardMaterial({color:0x2a7a2a});
  const trunkMat = new THREE.MeshStandardMaterial({color:0x5a3b1d});

  for(let i=0;i<30;i++){
    const tree = new THREE.Group();
    const trunk = new THREE.Mesh(trunkGeom, trunkMat);
    trunk.position.y = 0.5;
    trunk.castShadow = true;
    const leaves = new THREE.Mesh(treeGeom, leafMat);
    leaves.position.y = 1.5;
    leaves.castShadow = true;
    tree.add(trunk, leaves);
    const radius = 30;
    const angle = Math.random()*Math.PI*2;
    const r = radius* (0.4 + Math.random()*0.6);
    tree.position.set(Math.cos(angle)*r,0,Math.sin(angle)*r);
    scene.add(tree);
  }

  // Rocks & logs around fire
  const rockMat = new THREE.MeshStandardMaterial({color:0x555555});
  for(let i=0;i<8;i++){
    const rock = new THREE.Mesh(new THREE.DodecahedronGeometry(0.6+Math.random()*0.4,0), rockMat);
    const a = Math.random()*Math.PI*2;
    const d = 3 + Math.random()*2;
    rock.position.set(Math.cos(a)*d,0.3,Math.sin(a)*d);
    rock.rotation.y = Math.random()*Math.PI;
    rock.castShadow = true;
    scene.add(rock);
  }

  const logMat = new THREE.MeshStandardMaterial({color:0x654321});
  const logGeo = new THREE.CylinderGeometry(0.15,0.15,3,6);
  for(let i=0;i<4;i++){
    const log = new THREE.Mesh(logGeo, logMat);
    const a = i* Math.PI/2 + Math.random()*0.2;
    const d = 2.5;
    log.position.set(Math.cos(a)*d,0.75,Math.sin(a)*d);
    log.rotation.y = a;
    log.rotation.z = Math.PI/2;
    log.castShadow = true;
    scene.add(log);
  }

  // Fire base (invisible sphere for light helper)
  const fireBase = new THREE.Object3D();
  fireBase.position.set(0,0.8,0);
  scene.add(fireBase);

  // Point Light (flickering)
  fireLight = new THREE.PointLight(0xffaa33,2,15,2);
  fireLight.position.copy(fireBase.position);
  fireLight.castShadow = true;
  fireLight.shadow.mapSize.width = 256;
  fireLight.shadow.mapSize.height = 256;
  scene.add(fireLight);

  // Flame - low poly animated cone
  const flameGeo = new THREE.ConeGeometry(0.5,2,8,1,true);
  const flameMat = new THREE.MeshBasicMaterial({color:0xff4500, transparent:true, opacity:0.8, side:THREE.DoubleSide});
  flameMesh = new THREE.Mesh(flameGeo, flameMat);
  flameMesh.position.copy(fireBase.position);
  flameMesh.position.y += 1;
  scene.add(flameMesh);

  // Sparks particle system
  const sparkCount = 100;
  const sparkGeo = new THREE.BufferGeometry();
  const positions = new Float32Array(sparkCount*3);
  const velocities = new Float32Array(sparkCount*3);
  for(let i=0;i<sparkCount;i++){
    positions[i*3] = 0;
    positions[i*3+1] = 0.8;
    positions[i*3+2] = 0;
    velocities[i*3] = (Math.random()-0.5)*0.5;
    velocities[i*3+1] = Math.random()*0.8+0.2;
    velocities[i*3+2] = (Math.random()-0.5)*0.5;
  }
  sparkGeo.setAttribute('position', new THREE.BufferAttribute(positions,3));
  sparkGeo.setAttribute('velocity', new THREE.BufferAttribute(velocities,3));
  const sparkMat = new THREE.PointsMaterial({color:0xffaa33, size:0.08, transparent:true, opacity:0.9});
  sparkPoints = new THREE.Points(sparkGeo, sparkMat);
  scene.add(sparkPoints);

  // Sky: simple gradient background + stars + moon
  const starGeo = new THREE.BufferGeometry();
  const starCount = 500;
  const starPos = new Float32Array(starCount*3);
  for(let i=0;i<starCount;i++){
    const theta = Math.random()*2*Math.PI;
    const phi = Math.acos(2*Math.random()-1);
    const r = 90;
    starPos[i*3] = r*Math.sin(phi)*Math.cos(theta);
    starPos[i*3+1] = r*Math.cos(phi);
    starPos[i*3+2] = r*Math.sin(phi)*Math.sin(theta);
  }
  starGeo.setAttribute('position', new THREE.BufferAttribute(starPos,3));
  const starMat = new THREE.PointsMaterial({color:0xffffff, size:0.4});
  const stars = new THREE.Points(starGeo, starMat);
  scene.add(stars);

  const moon = new THREE.Mesh(
    new THREE.SphereGeometry(2,16,16),
    new THREE.MeshStandardMaterial({color:0xddddff, emissive:0x8888ff, emissiveIntensity:0.5})
  );
  moon.position.set(-30,30,-20);
  scene.add(moon);

  // Ambient dim light
  const ambient = new THREE.AmbientLight(0x222233,0.7);
  scene.add(ambient);

  window.addEventListener('resize', onWindowResize);
}

function onWindowResize(){
  camera.aspect = innerWidth/innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}

function animate(){
  requestAnimationFrame(animate);
  const dt = clock.getDelta();
  controls.update();

  // Flicker light
  fireLight.intensity = 1.5 + Math.random()*0.5;
  fireLight.distance = 8 + Math.random()*2;

  // Animate flame scale & rotation
  const scale = 0.8 + Math.sin(clock.elapsedTime*10)*0.2;
  flameMesh.scale.set(scale,scale,scale);
  flameMesh.rotation.y += 0.05;

  // Update sparks
  const pos = sparkPoints.geometry.attributes.position;
  const vel = sparkPoints.geometry.attributes.velocity;
  for(let i=0;i<pos.count;i++){
    let y = pos.getY(i) + vel.getY(i)*dt;
    if(y>5){ // reset
      pos.setXYZ(i,0,0.8,0);
      vel.setXYZ(i,(Math.random()-0.5)*0.5,Math.random()*0.8+0.2,(Math.random()-0.5)*0.5);
    }else{
      pos.setXYZ(i,
        pos.getX(i)+vel.getX(i)*dt,
        y,
        pos.getZ(i)+vel.getZ(i)*dt);
    }
  }
  pos.needsUpdate = true;

  renderer.render(scene, camera);
}
</script>
</body>
</html>