gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Low‑Poly Campfire Scene</title>
<style>
  body{margin:0;overflow:hidden;background:#000;}
  #overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:sans-serif;font-size:1.2rem;
    pointer-events:none;
  }
</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="overlay">Click or press any key to start</div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// ----- Basic Setup -----
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0d0b1a, 0.022);

const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 200);
camera.position.set(0, 8, 15);

const 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 -----
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.minDistance = 5;
controls.maxDistance = 40;
controls.minPolarAngle = Math.PI / 6;      // prevent looking below ground
controls.maxPolarAngle = Math.PI / 2.2;    // limit high angle
controls.target.set(0, 1, 0);

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

// ----- Low‑Poly Rocks -----
function addRock(x, z) {
  const geo = new THREE.DodecahedronGeometry(0.5 + Math.random()*0.5, 0);
  const mat = new THREE.MeshStandardMaterial({ color: 0x555555, flatShading:true });
  const rock = new THREE.Mesh(geo, mat);
  rock.position.set(x, 0.25, z);
  rock.castShadow = true;
  rock.receiveShadow = true;
  scene.add(rock);
}
for (let i = 0; i < 12; i++) {
  const angle = Math.random()*Math.PI*2;
  const radius = 3 + Math.random()*4;
  addRock(Math.cos(angle)*radius, Math.sin(angle)*radius);
}

// ----- Logs -----
function createLog() {
  const geo = new THREE.CylinderGeometry(0.12,0.12,2,6);
  const mat = new THREE.MeshStandardMaterial({ color: 0x8b5a2b, flatShading:true });
  const log = new THREE.Mesh(geo, mat);
  log.castShadow = true;
  log.receiveShadow = true;
  return log;
}
const log1 = createLog();
log1.rotation.z = Math.PI/4;
log1.position.set(0.3,0.6,0);
scene.add(log1);
const log2 = createLog();
log2.rotation.z = -Math.PI/4;
log2.position.set(-0.3,0.6,0);
scene.add(log2);
const log3 = createLog();
log3.rotation.z = 0;
log3.position.set(0,0.6,0.3);
scene.add(log3);
const log4 = createLog();
log4.rotation.z = Math.PI;
log4.position.set(0,0.6,-0.3);
scene.add(log4);

// ----- Campfire Flames -----
const flameGeo = new THREE.SphereGeometry(0.4, 5,5);
const flameMat = new THREE.MeshBasicMaterial({ color: 0xffa500, transparent:true, opacity:0.8, depthWrite:false });
const flame = new THREE.Mesh(flameGeo, flameMat);
flame.position.set(0,0.9,0);
scene.add(flame);

// ----- Light -----
const fireLight = new THREE.PointLight(0xffaa33, 2, 12, 2);
fireLight.position.set(0,1.2,0);
fireLight.castShadow = true;
fireLight.shadow.mapSize.width = 256;
fireLight.shadow.mapSize.height = 256;
scene.add(fireLight);

// ----- Sparks Particle System -----
const maxSparks = 100;
const sparkPos = new Float32Array(maxSparks*3);
const sparkVel = new Float32Array(maxSparks*3);
const sparkLife = new Float32Array(maxSparks);
const sparkGeo = new THREE.BufferGeometry();
sparkGeo.setAttribute('position', new THREE.BufferAttribute(sparkPos,3));
const sparkMat = new THREE.PointsMaterial({ color:0xffaa33, size:0.07, transparent:true, opacity:0.9 });
const sparks = new THREE.Points(sparkGeo, sparkMat);
scene.add(sparks);

function spawnSpark(i) {
  sparkPos[i*3] = (Math.random()-0.5)*0.3;
  sparkPos[i*3+1] = 0.7;
  sparkPos[i*3+2] = (Math.random()-0.5)*0.3;
  const speed = 0.02 + Math.random()*0.02;
  sparkVel[i*3] = (Math.random()-0.5)*speed;
  sparkVel[i*3+1] = 0.03 + Math.random()*0.03;
  sparkVel[i*3+2] = (Math.random()-0.5)*speed;
  sparkLife[i] = 1.0;
}
for(let i=0;i<maxSparks;i++) spawnSpark(i);

// ----- Trees -----
function addTree(x,z) {
  const trunkGeo = new THREE.CylinderGeometry(0.12,0.12,1,6);
  const trunkMat = new THREE.MeshStandardMaterial({color:0x4b332e, flatShading:true});
  const trunk = new THREE.Mesh(trunkGeo, trunkMat);
  trunk.position.set(x,0.5,z);
  trunk.castShadow = true;
  trunk.receiveShadow = true;
  scene.add(trunk);
  const foliageGeo = new THREE.ConeGeometry(0.8,2,5);
  const foliageMat = new THREE.MeshStandardMaterial({color:0x2a5d29, flatShading:true});
  const foliage = new THREE.Mesh(foliageGeo, foliageMat);
  foliage.position.set(x,1.8,z);
  foliage.castShadow = true;
  foliage.receiveShadow = true;
  scene.add(foliage);
}
function randPos(radius) {
  const a = Math.random()*Math.PI*2;
  const r = radius*Math.sqrt(Math.random());
  return [Math.cos(a)*r, Math.sin(a)*r];
}
for(let i=0; i<30; i++) {
  const [x,z] = randPos(20);
  // keep a clear area (radius ~5) around fire
  if (Math.hypot(x,z) < 5) { i--; continue; }
  addTree(x,z);
}

// ----- Night Sky -----
function addStars() {
  const starGeo = new THREE.BufferGeometry();
  const starCount = 400;
  const positions = 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 = 80;
    positions[i*3] = r*Math.sin(phi)*Math.cos(theta);
    positions[i*3+1] = r*Math.cos(phi)+20; // raise a bit
    positions[i*3+2] = r*Math.sin(phi)*Math.sin(theta);
  }
  starGeo.setAttribute('position', new THREE.BufferAttribute(positions,3));
  const starMat = new THREE.PointsMaterial({color:0xffffff, size:0.5});
  const stars = new THREE.Points(starGeo, starMat);
  scene.add(stars);
}
addStars();

const moonGeo = new THREE.SphereGeometry(2,16,16);
const moonMat = new THREE.MeshStandardMaterial({color:0xe0e0e0, emissive:0xaaaaaa, emissiveIntensity:0.2, flatShading:true});
const moon = new THREE.Mesh(moonGeo, moonMat);
moon.position.set(-30,25,-20);
scene.add(moon);

// ----- Animation -----
let clock = new THREE.Clock();

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

  // flame flicker
  const scale = 0.9 + Math.random()*0.2;
  flame.scale.set(scale,scale,scale);
  fireLight.intensity = 1.8 + Math.random()*0.4;
  fireLight.distance = 10 + Math.random()*2;

  // sparks update
  for(let i=0;i<maxSparks;i++) {
    if (sparkLife[i] > 0) {
      sparkPos[i*3] += sparkVel[i*3];
      sparkPos[i*3+1] += sparkVel[i*3+1];
      sparkPos[i*3+2] += sparkVel[i*3+2];
      sparkVel[i*3+1] += 0.001; // slight upward acceleration
      sparkLife[i] -= dt;
      if (sparkLife[i] <= 0) spawnSpark(i);
    }
  }
  sparkGeo.attributes.position.needsUpdate = true;

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

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

// ----- Interaction hint removal -----
function startDemo(){
  document.getElementById('overlay').style.display='none';
  window.removeEventListener('keydown',startDemo);
  window.removeEventListener('click',startDemo);
}
window.addEventListener('keydown',startDemo);
window.addEventListener('click',startDemo);
</script>
</body>
</html>