Download index.html from victor/test: direct link, hf CLI and curl.
- Browser
- Download file 34.3 kB
-
https://huggingface.co/victor/test/resolve/main/index.html
- Command line
-
hf download hf://victor/test/index.html
-
curl -L -o index.html https://huggingface.co/victor/test/resolve/main/index.html
34.3 kB
| <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> |