test / index.html

victor HF Staff

Upload folder using huggingface_hub

0e2a721 verified 8 months ago

34.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Three.js Forest with Orbit + Arrow Move + Lighting + Stars</title>
	<style>
	:root { color-scheme: dark; }
	html, body { height: 100%; }
	body {
	margin: 0;
	overflow: hidden;
	background: #0a0f12;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	}
	.ui {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 10px 12px;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #cfe3d4;
	font-size: 12px;
	line-height: 1.4;
	user-select: none;
	max-width: 360px;
	}
	.ui h1 {
	margin: 0 0 6px 0;
	font-size: 14px;
	font-weight: 600;
	color: #e8f5ea;
	letter-spacing: 0.3px;
	}
	.ui .row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
	}
	.ui label {
	min-width: 90px;
	color: #cde2cf;
	}
	.ui input[type=range] { width: 180px; }
	.ui .hint { opacity: 0.85; font-size: 11px; margin-top: 6px; }
	.kbd {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 4px;
	background: rgba(255,255,255,0.06);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 16px;
	}
	</style>
	</head>
	<body>
	<div class="ui">
	<h1>Procedural Forest</h1>
	<div class="row">
	<label for="density">Density</label>
	<input id="density" type="range" min="50" max="1200" value="550" />
	<span id="densityVal">550</span>
	</div>
	<div class="row">
	<label for="wind">Wind</label>
	<input id="wind" type="range" min="0" max="100" value="35" />
	<span id="windVal">0.35</span>
	</div>
	<div class="row">
	<label for="size">Area</label>
	<input id="size" type="range" min="150" max="600" value="350" />
	<span id="sizeVal">350</span>
	</div>

	<h1 style="margin-top:10px;">Lighting</h1>
	<div class="row">
	<label for="sunInt">Sun Intensity</label>
	<input id="sunInt" type="range" min="0" max="2000" value="1000" />
	<span id="sunIntVal">10.00</span>
	</div>
	<div class="row">
	<label for="sunElev">Sun Elev</label>
	<input id="sunElev" type="range" min="5" max="85" value="60" />
	<span id="sunElevVal">60°</span>
	</div>
	<div class="row">
	<label for="sunAzim">Sun Azim</label>
	<input id="sunAzim" type="range" min="0" max="360" value="145" />
	<span id="sunAzimVal">145°</span>
	</div>
	<div class="row">
	<label for="hemi">Sky/Amb</label>
	<input id="hemi" type="range" min="0" max="150" value="60" />
	<span id="hemiVal">0.60</span>
	</div>

	<div class="hint">
	Orbit: Left drag • Pan: Right drag • Zoom: Wheel<br/>
	Move camera with <span class="kbd">↑</span><span class="kbd">↓</span><span class="kbd">←</span><span class="kbd">→</span> • Boost: <span class="kbd">Shift</span><br/>
	Tip: Click the canvas once to ensure it has focus for arrow keys.
	</div>
	</div>

	<script type="importmap">
	{
	"imports": {
	"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
	"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
	}
	}
	</script>
	<script type="module">
	import * as THREE from 'three';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	renderer.domElement.tabIndex = 0; // make focusable for key events
	document.body.appendChild(renderer.domElement);

	const scene = new THREE.Scene();
	scene.fog = new THREE.FogExp2(0x0d1713, 0.0022);

	// Lights
	const hemiLight = new THREE.HemisphereLight(0xbfdde3, 0x1e3222, 0.6);
	scene.add(hemiLight);

	const dirLight = new THREE.DirectionalLight(0xfff4d6, 3.0); // default x3 intensity
	dirLight.position.set(-60, 120, 40);
	dirLight.castShadow = true;
	dirLight.shadow.mapSize.set(2048, 2048);
	const cam = dirLight.shadow.camera;
	const shadowExtent = 300;
	cam.left = -shadowExtent;
	cam.right = shadowExtent;
	cam.top = shadowExtent;
	cam.bottom = -shadowExtent;
	cam.near = 10;
	cam.far = 400;
	scene.add(dirLight);

	// Hook up UI controls
	const densityEl = document.getElementById('density');
	const densityValEl = document.getElementById('densityVal');
	const windEl = document.getElementById('wind');
	const windValEl = document.getElementById('windVal');
	const sizeEl = document.getElementById('size');
	const sizeValEl = document.getElementById('sizeVal');

	const sunIntEl = document.getElementById('sunInt');
	const sunIntValEl = document.getElementById('sunIntVal');
	const sunElevEl = document.getElementById('sunElev');
	const sunElevValEl = document.getElementById('sunElevVal');
	const sunAzimEl = document.getElementById('sunAzim');
	const sunAzimValEl = document.getElementById('sunAzimVal');
	const hemiEl = document.getElementById('hemi');
	const hemiValEl = document.getElementById('hemiVal');

	// Initial UI state sync
	function setSunFromUI() {
	const intensity = Number(sunIntEl.value) / 100; // 0..20
	dirLight.intensity = intensity;
	sunIntValEl.textContent = intensity.toFixed(2);

	const elevDeg = Number(sunElevEl.value);
	const azimDeg = Number(sunAzimEl.value);
	sunElevValEl.textContent = elevDeg + '°';
	sunAzimValEl.textContent = azimDeg + '°';

	// Position the directional light based on elevation/azimuth around origin
	const elev = THREE.MathUtils.degToRad(elevDeg);
	const azim = THREE.MathUtils.degToRad(azimDeg);
	const r = 200;
	const y = Math.sin(elev) * r;
	const x = Math.cos(elev) * Math.cos(azim) * r;
	const z = Math.cos(elev) * Math.sin(azim) * r;
	dirLight.position.set(x, y, z);
	dirLight.target.position.set(0, 0, 0);
	dirLight.target.updateMatrixWorld();
	}

	function setHemiFromUI() {
	const hemiIntensity = Number(hemiEl.value) / 100; // 0..1.5
	hemiLight.intensity = hemiIntensity;
	hemiValEl.textContent = hemiIntensity.toFixed(2);
	}

	function setWindFromUI() {
	const w = Number(windEl.value) / 100;
	wind.strength = w;
	windValEl.textContent = w.toFixed(2);
	windUniforms.uStrength.value = w;
	}

	function setDensityFromUI() {
	const d = Number(densityEl.value);
	densityValEl.textContent = String(d);
	regenerateForest(d, areaSize.value);
	regenerateDecor(areaSize.value);
	}

	function setAreaFromUI() {
	const s = Number(sizeEl.value);
	areaSize.value = s;
	sizeValEl.textContent = String(s);
	regenerateForest(Number(densityEl.value), s);
	regenerateDecor(s);
	}

	sunIntEl.addEventListener('input', setSunFromUI);
	sunElevEl.addEventListener('input', setSunFromUI);
	sunAzimEl.addEventListener('input', setSunFromUI);
	hemiEl.addEventListener('input', setHemiFromUI);
	windEl.addEventListener('input', setWindFromUI);
	densityEl.addEventListener('change', setDensityFromUI);
	sizeEl.addEventListener('change', setAreaFromUI);

	// Ground
	const areaSize = { value: 350 };
	const groundSegments = 256;
	const groundGeo = new THREE.PlaneGeometry(1000, 1000, groundSegments, groundSegments);
	groundGeo.rotateX(-Math.PI / 2);
	const pos = groundGeo.attributes.position;
	const tmp = new THREE.Vector3();
	for (let i = 0; i < pos.count; i++) {
	tmp.fromBufferAttribute(pos, i);
	const nx = tmp.x * 0.01;
	const nz = tmp.z * 0.01;
	const h =
	Math.sin(nx) * Math.cos(nz) * 1.2 +
	Math.sin(nx * 0.21 + 2.7) * Math.sin(nz * 0.19 + 1.5) * 0.7 +
	Math.cos(nx * 0.07 - 1.1) * Math.sin(nz * 0.09 + 0.4) * 2.0;
	pos.setY(i, h);
	}
	groundGeo.computeVertexNormals();

	function makeGrassTexture(w = 256, h = 256) {
	const size = w * h * 3;
	const data = new Uint8Array(size);
	for (let y = 0; y < h; y++) {
	for (let x = 0; x < w; x++) {
	const i = (y * w + x) * 3;
	const u = x / w, v = y / h;
	const noise =
	Math.sin(u * 20.0) * 0.5 + Math.cos(v * 18.0) * 0.5 +
	Math.sin((u + v) * 8.0) * 0.4;
	const base = 80 + noise * 40;
	const g = THREE.MathUtils.clamp(base + (v - 0.5) * 30, 50, 190);
	const r = g * 0.6;
	const b = g * 0.5;
	data[i] = r; data[i + 1] = g; data[i + 2] = b;
	}
	}
	const tex = new THREE.DataTexture(data, w, h, THREE.RGBFormat);
	tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
	tex.needsUpdate = true;
	return tex;
	}
	const grassTex = makeGrassTexture(256, 256);
	grassTex.repeat.set(20, 20);
	const groundMat = new THREE.MeshStandardMaterial({
	map: grassTex,
	roughness: 1.0,
	metalness: 0.0,
	color: new THREE.Color(0x5c8b63).multiplyScalar(0.9)
	});
	const ground = new THREE.Mesh(groundGeo, groundMat);
	ground.receiveShadow = true;
	scene.add(ground);

	// Trees
	const treeGroup = new THREE.Group();
	scene.add(treeGroup);

	const trunkGeo = new THREE.CylinderGeometry(1, 1.8, 10, 8, 1, false);
	trunkGeo.translate(0, 5, 0);

	function makeFoliageGeometry() {
	const g = new THREE.BufferGeometry();
	const geometries = [];

	const cone1 = new THREE.ConeGeometry(6, 10, 8);
	cone1.translate(0, 14, 0); geometries.push(cone1);
	const cone2 = new THREE.ConeGeometry(5, 9, 8);
	cone2.translate(0, 20, 0); geometries.push(cone2);
	const cone3 = new THREE.ConeGeometry(4, 8, 8);
	cone3.translate(0, 25, 0); geometries.push(cone3);
	const sph = new THREE.SphereGeometry(3.5, 8, 6);
	sph.translate(0, 28.5, 0); geometries.push(sph);

	let totalVertices = 0, totalIndices = 0;
	for (const geo of geometries) {
	geo.computeVertexNormals();
	totalVertices += geo.attributes.position.count;
	totalIndices += geo.index ? geo.index.count : geo.attributes.position.count;
	}
	const posArr = new Float32Array(totalVertices * 3);
	const normArr = new Float32Array(totalVertices * 3);
	const uvArr = new Float32Array(totalVertices * 2);
	const indexArr = new Uint32Array(totalIndices);

	let vOffset = 0, iOffset = 0, baseVertex = 0;
	for (const geo of geometries) {
	const p = geo.attributes.position.array;
	const n = geo.attributes.normal.array;
	const u = geo.attributes.uv ? geo.attributes.uv.array : new Float32Array(geo.attributes.position.count * 2);
	posArr.set(p, vOffset * 3);
	normArr.set(n, vOffset * 3);
	uvArr.set(u, vOffset * 2);

	if (geo.index) {
	const idx = geo.index.array;
	for (let i = 0; i < idx.length; i++) indexArr[iOffset + i] = idx[i] + baseVertex;
	iOffset += idx.length;
	} else {
	for (let i = 0; i < geo.attributes.position.count; i++) indexArr[iOffset++] = baseVertex + i;
	}
	baseVertex += geo.attributes.position.count;
	vOffset += geo.attributes.position.count;
	}
	g.setAttribute('position', new THREE.BufferAttribute(posArr, 3));
	g.setAttribute('normal', new THREE.BufferAttribute(normArr, 3));
	g.setAttribute('uv', new THREE.BufferAttribute(uvArr, 2));
	g.setIndex(new THREE.BufferAttribute(indexArr, 1));
	g.computeBoundingSphere(); g.computeBoundingBox();
	return g;
	}

	const foliageGeo = makeFoliageGeometry();

	const trunkMat = new THREE.MeshStandardMaterial({
	color: 0x6b4f32, roughness: 0.9, metalness: 0.0
	});
	const foliageMat = new THREE.MeshStandardMaterial({
	color: 0x2f6b3d, roughness: 0.8, metalness: 0.0
	});

	let trunkInstanced, foliageInstanced;
	function makeInstancedMeshes(count) {
	if (trunkInstanced) treeGroup.remove(trunkInstanced);
	if (foliageInstanced) treeGroup.remove(foliageInstanced);
	trunkInstanced = new THREE.InstancedMesh(trunkGeo, trunkMat, count);
	trunkInstanced.castShadow = true; trunkInstanced.receiveShadow = true;
	foliageInstanced = new THREE.InstancedMesh(foliageGeo, foliageMat, count);
	foliageInstanced.castShadow = true; foliageInstanced.receiveShadow = true;
	treeGroup.add(trunkInstanced, foliageInstanced);
	}

	const wind = { strength: 0.35 };
	const rng = (seed => () => { seed = (seed * 1664525 + 1013904223) % 4294967296; return seed / 4294967296; })(123456789);

	const groundHeightAt = (x, z) => {
	const nx = x * 0.01, nz = z * 0.01;
	return Math.sin(nx) * Math.cos(nz) * 1.2 +
	Math.sin(nx * 0.21 + 2.7) * Math.sin(nz * 0.19 + 1.5) * 0.7 +
	Math.cos(nx * 0.07 - 1.1) * Math.sin(nz * 0.09 + 0.4) * 2.0;
	};

	let treeData = [];
	function regenerateForest(count, radius = areaSize.value) {
	makeInstancedMeshes(count);
	treeData.length = 0;

	const minSpacing = 4.0;
	const ext = radius;
	const attempts = count * 8;
	const points = [];
	for (let i = 0; i < attempts && points.length < count; i++) {
	const x = (rng() * 2 - 1) * ext;
	const z = (rng() * 2 - 1) * ext;
	const h = groundHeightAt(x, z);
	const hx = groundHeightAt(x + 1.0, z);
	const hz = groundHeightAt(x, z + 1.0);
	const slope = Math.hypot(hx - h, hz - h);
	if (slope > 1.2) continue;

	let ok = true;
	for (let p = 0; p < points.length; p++) {
	const dx = x - points[p].x;
	const dz = z - points[p].z;
	if (dx * dx + dz * dz < minSpacing * minSpacing) { ok = false; break; }
	}
	if (!ok) continue;

	const t = {
	x, z, h,
	scale: 0.8 + rng() * 1.6,
	type: rng() < 0.7 ? 'pine' : 'round',
	swayPhase: rng() * Math.PI * 2,
	swayAmp: 0.02 + rng() * 0.04
	};
	points.push({ x, z });
	treeData.push(t);
	}

	const m = new THREE.Matrix4();
	const q = new THREE.Quaternion();
	const up = new THREE.Vector3(0, 1, 0);
	for (let i = 0; i < treeData.length; i++) {
	const t = treeData[i];
	q.setFromAxisAngle(up, rng() * Math.PI * 2);
	m.compose(new THREE.Vector3(t.x, t.h, t.z), q, new THREE.Vector3(1, t.scale, 1));
	trunkInstanced.setMatrixAt(i, m);

	const foliageScale = 0.9 * t.scale;
	m.compose(new THREE.Vector3(t.x, t.h, t.z), q, new THREE.Vector3(foliageScale, foliageScale, foliageScale));
	foliageInstanced.setMatrixAt(i, m);

	const baseLeaf = new THREE.Color(0x2f6b3d);
	const shade = 0.8 + rng() * 0.4;
	const tint = baseLeaf.clone().multiplyScalar(shade);
	foliageInstanced.setColorAt(i, tint);

	const trunkColor = new THREE.Color(0x5c3f28).offsetHSL(0, 0, (rng() - 0.5) * 0.05);
	trunkInstanced.setColorAt(i, trunkColor);
	}
	trunkInstanced.instanceColor = new THREE.InstancedBufferAttribute(trunkInstanced.instanceColor.array, 3);
	foliageInstanced.instanceColor = new THREE.InstancedBufferAttribute(foliageInstanced.instanceColor.array, 3);
	trunkInstanced.instanceMatrix.needsUpdate = true;
	foliageInstanced.instanceMatrix.needsUpdate = true;
	}

	const windUniforms = { uTime: { value: 0 }, uStrength: { value: wind.strength } };
	foliageMat.onBeforeCompile = (shader) => {
	shader.uniforms.uTime = windUniforms.uTime;
	shader.uniforms.uStrength = windUniforms.uStrength;
	shader.vertexShader = `
	uniform float uTime;
	uniform float uStrength;
	` + shader.vertexShader.replace(
	'#include <begin_vertex>',
	`
	#include <begin_vertex>
	float sway = sin(uTime * 1.7 + position.y * 0.35) * 0.5 + sin(uTime * 0.9 + position.y * 0.7) * 0.5;
	transformed.x += sway * uStrength * (0.4 + position.y * 0.06);
	transformed.z += cos(uTime * 1.1 + position.y * 0.42) * uStrength * (0.3 + position.y * 0.05);
	`
	);
	};
	foliageMat.needsUpdate = true;

	// Decorations
	const decoGroup = new THREE.Group(); scene.add(decoGroup);
	function makeRockGeometry() {
	const geo = new THREE.IcosahedronGeometry(1.0, 1);
	const arr = geo.attributes.position.array;
	for (let i = 0; i < arr.length; i += 3) {
	const r = 0.7 + rng() * 0.6;
	arr[i] = r; arr[i + 1] = (0.6 + rng() * 0.4 + 0.2); arr[i + 2] *= r;
	}
	geo.computeVertexNormals();
	return geo;
	}
	const rockGeo = makeRockGeometry();
	const rockMat = new THREE.MeshStandardMaterial({ color: 0x808a8f, roughness: 0.95, metalness: 0.0 });
	const rocksInst = new THREE.InstancedMesh(rockGeo, rockMat, 400);
	rocksInst.castShadow = true; rocksInst.receiveShadow = true; decoGroup.add(rocksInst);

	const grassBladeGeo = new THREE.PlaneGeometry(0.08, 1.2, 1, 3);
	grassBladeGeo.translate(0, 0.6, 0);
	const grassMat = new THREE.MeshStandardMaterial({ color: 0x5aa35f, side: THREE.DoubleSide, roughness: 1.0, metalness: 0.0 });
	const grassInst = new THREE.InstancedMesh(grassBladeGeo, grassMat, 2000);
	grassInst.castShadow = false; grassInst.receiveShadow = true; decoGroup.add(grassInst);

	function regenerateDecor(radius = areaSize.value) {
	const m = new THREE.Matrix4();
	const q = new THREE.Quaternion();

	const rockCount = rocksInst.count;
	const rockExt = radius * 0.95;
	for (let i = 0; i < rockCount; i++) {
	const x = (rng() * 2 - 1) * rockExt;
	const z = (rng() * 2 - 1) * rockExt;
	const h = groundHeightAt(x, z);
	q.setFromAxisAngle(new THREE.Vector3(0,1,0), rng() * Math.PI * 2);
	const s = 0.6 + rng() * 2.0;
	m.compose(new THREE.Vector3(x, h, z), q, new THREE.Vector3(s, s * (0.6 + rng() * 0.4), s));
	rocksInst.setMatrixAt(i, m);
	const shade = 0.8 + rng() * 0.3;
	const c = new THREE.Color().setRGB(0.6 * shade, 0.66 * shade, 0.72 * shade);
	rocksInst.setColorAt(i, c);
	}
	rocksInst.instanceMatrix.needsUpdate = true;
	if (!rocksInst.instanceColor) rocksInst.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(rockCount * 3), 3);
	rocksInst.instanceColor.needsUpdate = true;

	const grassCount = grassInst.count;
	const grassExt = radius;
	for (let i = 0; i < grassCount; i++) {
	const x = (rng() * 2 - 1) * grassExt;
	const z = (rng() * 2 - 1) * grassExt;
	const h = groundHeightAt(x, z);
	q.setFromAxisAngle(new THREE.Vector3(0,1,0), rng() * Math.PI * 2);
	const s = 0.7 + rng() * 0.6;
	m.compose(new THREE.Vector3(x, h, z), q, new THREE.Vector3(s, s, s));
	grassInst.setMatrixAt(i, m);
	const g = 0.7 + rng() * 0.3;
	const col = new THREE.Color(0x5aa35f).multiplyScalar(g);
	grassInst.setColorAt(i, col);
	}
	grassInst.instanceMatrix.needsUpdate = true;
	if (!grassInst.instanceColor) grassInst.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(grassCount * 3), 3);
	grassInst.instanceColor.needsUpdate = true;
	}

	// Atmosphere particles
	const particleGeo = new THREE.BufferGeometry();
	const PCOUNT = 800;
	const positions = new Float32Array(PCOUNT * 3);
	const speeds = new Float32Array(PCOUNT);
	const pColors = new Float32Array(PCOUNT * 3);
	for (let i = 0; i < PCOUNT; i++) {
	positions[i * 3] = (rng() * 2 - 1) * 250;
	positions[i * 3 + 1] = 1 + rng() * 12;
	positions[i * 3 + 2] = (rng() * 2 - 1) * 250;
	speeds[i] = 0.2 + rng() * 0.6;
	const c = new THREE.Color().setHSL(0.14 + rng() * 0.05, 0.4, 0.6 + rng() * 0.2);
	pColors[i * 3] = c.r; pColors[i * 3 + 1] = c.g; pColors[i * 3 + 2] = c.b;
	}
	particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
	particleGeo.setAttribute('aSpeed', new THREE.BufferAttribute(speeds, 1));
	particleGeo.setAttribute('color', new THREE.BufferAttribute(pColors, 3));
	const particleMat = new THREE.PointsMaterial({ size: 0.6, sizeAttenuation: true, transparent: true, opacity: 0.7, depthWrite: false, vertexColors: true });
	const particles = new THREE.Points(particleGeo, particleMat);
	scene.add(particles);

	// Water
	const waterGeo = new THREE.PlaneGeometry(200, 8, 1, 1);
	waterGeo.rotateX(-Math.PI / 2);
	const waterMat = new THREE.MeshPhysicalMaterial({
	color: 0x2a5b6b, roughness: 0.25, metalness: 0.0,
	transmission: 0.2, thickness: 0.2, transparent: true, opacity: 0.85,
	clearcoat: 0.4, clearcoatRoughness: 0.3
	});
	const water = new THREE.Mesh(waterGeo, waterMat);
	water.position.set(0, groundHeightAt(0, 0) - 0.2, 0);
	water.receiveShadow = true;
	scene.add(water);

	// Camera and controls
	const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1200);
	camera.position.set(60, 40, 80);
	const controls = new OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true; controls.dampingFactor = 0.05;
	controls.maxPolarAngle = Math.PI * 0.495;
	controls.target.set(0, 8, 0); controls.update();

	// Initial generation
	regenerateForest(550, areaSize.value);
	regenerateDecor(areaSize.value);

	// Sync UI to scene after initial generation
	setSunFromUI();
	setHemiFromUI();
	setWindFromUI();
	setAreaFromUI();

	// STARFIELD
	function addStars() {
	const starGeo = new THREE.BufferGeometry();
	const STAR_COUNT = 4000;
	const starPos = new Float32Array(STAR_COUNT * 3);
	const starCol = new Float32Array(STAR_COUNT * 3);

	// Distribute stars on a sphere shell to avoid fog-thick inner region
	const radiusMin = 500;
	const radiusMax = 900;
	for (let i = 0; i < STAR_COUNT; i++) {
	const u = rng();
	const v = rng();
	const theta = 2 * Math.PI * u;
	const phi = Math.acos(2 * v - 1);
	const r = radiusMin + rng() * (radiusMax - radiusMin);
	const x = r * Math.sin(phi) * Math.cos(theta);
	const y = r * Math.cos(phi);
	const z = r * Math.sin(phi) * Math.sin(theta);
	starPos[i * 3] = x;
	starPos[i * 3 + 1] = y;
	starPos[i * 3 + 2] = z;

	const twinkle = 0.85 + rng() * 0.3;
	const c = new THREE.Color().setHSL(0.57 + rng() * 0.1, 0.1 + rng() * 0.2, 0.9 * twinkle);
	starCol[i * 3] = c.r; starCol[i * 3 + 1] = c.g; starCol[i * 3 + 2] = c.b;
	}
	starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
	starGeo.setAttribute('color', new THREE.BufferAttribute(starCol, 3));

	const starMat = new THREE.PointsMaterial({
	size: 1.4,
	sizeAttenuation: true,
	depthWrite: false,
	transparent: true,
	opacity: 0.95,
	vertexColors: true
	});

	const stars = new THREE.Points(starGeo, starMat);
	stars.renderOrder = -1;
	scene.add(stars);

	// Soft nebula background using a big inverted sphere with emissive color
	const skyGeo = new THREE.SphereGeometry(1200, 32, 16);
	skyGeo.scale(-1, 1, 1); // inward facing
	const skyMat = new THREE.MeshBasicMaterial({
	color: 0x0b1216
	});
	const sky = new THREE.Mesh(skyGeo, skyMat);
	scene.add(sky);

	// Subtle rotation for parallax feel
	return { stars, sky };
	}
	const starfield = addStars();



	densityEl.addEventListener('input', () => {
	const count = parseInt(densityEl.value, 10);
	densityVal.textContent = count;
	regenerateForest(count, areaSize.value);
	});
	windEl.addEventListener('input', () => {
	const v = parseInt(windEl.value, 10) / 100;
	wind.strength = v;
	windUniforms.uStrength.value = v;
	windVal.textContent = v.toFixed(2);
	});
	sizeEl.addEventListener('input', () => {
	const v = parseInt(sizeEl.value, 10);
	areaSize.value = v;
	sizeVal.textContent = v;
	regenerateForest(parseInt(densityEl.value, 10), v);
	regenerateDecor(v);
	});

	function updateSunFromUI() {
	const intensity = parseInt(sunIntEl.value, 10) / 100;
	const elevDeg = parseInt(sunElevEl.value, 10);
	const azimDeg = parseInt(sunAzimEl.value, 10);
	const elev = THREE.MathUtils.degToRad(elevDeg);
	const azim = THREE.MathUtils.degToRad(azimDeg);

	dirLight.intensity = intensity;
	const r = 180;
	const y = Math.sin(elev) * r;
	const horiz = Math.cos(elev) * r;
	const x = Math.cos(azim) * horiz;
	const z = Math.sin(azim) * horiz;
	dirLight.position.set(x, y, z);

	sunIntVal.textContent = intensity.toFixed(2);
	sunElevVal.textContent = elevDeg + '°';
	sunAzimVal.textContent = azimDeg + '°';
	}
	function updateHemiFromUI() {
	const v = parseInt(hemiEl.value, 10) / 100;
	hemiLight.intensity = v;
	hemiVal.textContent = v.toFixed(2);
	}
	sunIntEl.addEventListener('input', updateSunFromUI);
	sunElevEl.addEventListener('input', updateSunFromUI);
	sunAzimEl.addEventListener('input', updateSunFromUI);
	hemiEl.addEventListener('input', updateHemiFromUI);
	updateSunFromUI();
	updateHemiFromUI();

	// Keyboard movement (arrow keys) - moves camera in view plane
	const keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, ShiftLeft: false, ShiftRight: false };
	function setKey(code, down) {
	if (code in keys) {
	keys[code] = down;
	return true;
	}
	return false;
	}
	// Use key property for better cross-browser Arrow naming, fallback to code
	window.addEventListener('keydown', (e) => {
	const hit = setKey(e.key \|\| e.code, true) \|\| setKey(e.code, true);
	if (hit) { e.preventDefault(); }
	}, { passive: false });
	window.addEventListener('keyup', (e) => {
	const hit = setKey(e.key \|\| e.code, false) \|\| setKey(e.code, false);
	if (hit) { e.preventDefault(); }
	}, { passive: false });
	// Also allow WASD
	window.addEventListener('keydown', (e) => {
	if (e.key === 'w' \|\| e.key === 'W') { keys.ArrowUp = true; e.preventDefault(); }
	if (e.key === 's' \|\| e.key === 'S') { keys.ArrowDown = true; e.preventDefault(); }
	if (e.key === 'a' \|\| e.key === 'A') { keys.ArrowLeft = true; e.preventDefault(); }
	if (e.key === 'd' \|\| e.key === 'D') { keys.ArrowRight = true; e.preventDefault(); }
	}, { passive: false });
	window.addEventListener('keyup', (e) => {
	if (e.key === 'w' \|\| e.key === 'W') { keys.ArrowUp = false; e.preventDefault(); }
	if (e.key === 's' \|\| e.key === 'S') { keys.ArrowDown = false; e.preventDefault(); }
	if (e.key === 'a' \|\| e.key === 'A') { keys.ArrowLeft = false; e.preventDefault(); }
	if (e.key === 'd' \|\| e.key === 'D') { keys.ArrowRight = false; e.preventDefault(); }
	}, { passive: false });

	function updateKeyboardMovement(dt) {
	const speedBase = 25; // units per second
	const boost = (keys.ShiftLeft \|\| keys.ShiftRight) ? 3.0 : 1.0;
	const speed = speedBase * boost;

	let inputX = 0, inputZ = 0;
	if (keys.ArrowUp) inputZ -= 1;
	if (keys.ArrowDown) inputZ += 1;
	if (keys.ArrowLeft) inputX -= 1;
	if (keys.ArrowRight) inputX += 1;

	if (inputX !== 0 \|\| inputZ !== 0) {
	const forward = new THREE.Vector3();
	camera.getWorldDirection(forward);
	forward.y = 0; forward.normalize();
	// Right vector should be forward cross up
	const right = new THREE.Vector3().crossVectors(forward, new THREE.Vector3(0,1,0)).normalize();

	const move = new THREE.Vector3()
	.addScaledVector(forward, inputZ)
	.addScaledVector(right, inputX)
	.normalize()
	.multiplyScalar(speed * dt);

	camera.position.add(move);
	controls.target.add(move);
	}
	}

	// Animation loop
	const clock = new THREE.Clock();
	function animate() {
	requestAnimationFrame(animate);
	const t = clock.getElapsedTime();
	const dt = clock.getDelta();

	windUniforms.uTime.value = t;

	// Particle drift
	const posAttr = particles.geometry.getAttribute('position');
	const spdAttr = particles.geometry.getAttribute('aSpeed');
	for (let i = 0; i < PCOUNT; i++) {
	const y = posAttr.getY(i);
	const x = posAttr.getX(i);
	const z = posAttr.getZ(i);
	const s = spdAttr.getX(i);
	const nx = x + Math.sin(t * 0.6 + i) * 0.02;
	const nz = z + Math.cos(t * 0.5 + i * 1.3) * 0.02;
	let ny = y + (Math.sin(t * s + i) * 0.003 + 0.002);
	if (ny > 14) ny = 1 + rng() * 2;
	posAttr.setXYZ(i, nx, ny, nz);
	}
	posAttr.needsUpdate = true;

	// Subtle star rotation for life
	if (starfield && starfield.stars) {
	starfield.stars.rotation.y = t * 0.002;
	starfield.stars.rotation.x = Math.sin(t * 0.05) * 0.02;
	}

	// Keyboard move
	updateKeyboardMovement(dt);

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

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

	// Ensure canvas focus on click so arrow keys work immediately
	renderer.domElement.addEventListener('pointerdown', () => renderer.domElement.focus());
	</script>
	</body>
	</html>