Storm Castle — Three.js

Storm Castle — use mouse to orbit / scroll to zoom

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { BokehPass } from 'three/addons/postprocessing/BokehPass.js'; import { buildCastle } from './castle.js'; import { createFlags, updateFlags } from './flags.js'; import { createRain, updateRain, createBirds, updateBirds, startLightning } from './weather.js'; import { createStoneTexture } from './utils.js'; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // Scene and Camera const scene = new THREE.Scene(); scene.background = new THREE.Color(0x08080b); scene.fog = new THREE.FogExp2(0x05050a, 0.0025); const camera = new THREE.PerspectiveCamera(38, window.innerWidth / window.innerHeight, 0.5, 2000); camera.position.set(0, 60, 160); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 30; controls.maxDistance = 400; controls.maxPolarAngle = Math.PI * 0.495; // Env - simple neutral env using PMREM from small cube texture const pmremGenerator = new THREE.PMREMGenerator(renderer); pmremGenerator.compileEquirectangularShader(); // Simple procedural stone texture const stoneTex = createStoneTexture({ size: 1024, seed: 42 }); // Lights const ambient = new THREE.AmbientLight(0x242830, 0.9); scene.add(ambient); const moon = new THREE.DirectionalLight(0xbfe6ff, 0.6); moon.position.set(-200, 300, -250); moon.castShadow = true; moon.shadow.camera.left = -300; moon.shadow.camera.right = 300; moon.shadow.camera.top = 300; moon.shadow.camera.bottom = -300; moon.shadow.mapSize.set(2048, 2048); scene.add(moon); // Torch lights container const torchGroup = new THREE.Group(); scene.add(torchGroup); // Build castle const castleGroup = buildCastle({ stoneTexture: stoneTex, torchGroup }); scene.add(castleGroup); // Flags const flagGroup = createFlags(); castleGroup.add(flagGroup); // Rain const rain = createRain(20000); scene.add(rain.mesh); // Birds const birds = createBirds(14); scene.add(birds.group); // Postprocessing const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloom = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.9, 0.8, 0.1); bloom.threshold = 0.05; bloom.strength = 0.9; bloom.radius = 0.8; composer.addPass(bloom); const bokeh = new BokehPass(scene, camera, { focus: 140.0, aperture: 0.0009, maxblur: 0.015, width: window.innerWidth, height: window.innerHeight }); // subtle DOF bokeh.enabled = true; composer.addPass(bokeh); // Window resize window.addEventListener('resize', onWindowResize); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); } // Lightning system (flashes) const lightning = startLightning({ scene, moon, castle: castleGroup }); // Animation loop const clock = new THREE.Clock(); function animate() { const dt = clock.getDelta(); const t = clock.elapsedTime; controls.update(); updateFlags(flagGroup, t); updateRain(rain, dt); updateBirds(birds, dt); lightning.update(t); // animate torch warm flicker lights torchGroup.children.forEach((l, i) => { l.intensity = 0.6 + Math.sin(t * 5 + i) * 0.25 * Math.random(); l.color.setHSL(0.08, 1.0, 0.5 + Math.sin(t * (2 + i * 0.1)) * 0.15); }); // Use composer for postprocessing composer.render(dt); requestAnimationFrame(animate); } animate(); import * as THREE from 'three'; export function buildCastle({ stoneTexture, torchGroup }) { const group = new THREE.Group(); // Create jagged cliff base const cliff = createCliff(); group.add(cliff); // Walls and keep const walls = createWalls(stoneTexture); walls.position.set(0, 28, 0); group.add(walls); // Towers const t1 = createTower(stoneTexture, 36, 18); t1.position.set(-54, 18, -18); group.add(t1); const t2 = createTower(stoneTexture, 46, 22); t2.position.set(48, 22, 10); group.add(t2); const centralKeep = createKeep(stoneTexture); centralKeep.position.set(0, 45, 0); group.add(centralKeep); // Add small gargoyles and decoration addGargoyles(group, stoneTexture); // Windows and warm emissive lights addWindowsAndTorches(group, torchGroup); // Slight scale and rotation to be cinematic group.rotation.y = 0.08; group.position.y = -10; return group; } function createCliff() { const geom = new THREE.PlaneGeometry(600, 260, 80, 40); const pos = geom.attributes.position; for (let i = 0; i < pos.count; i++) { const x = pos.getX(i); const y = pos.getY(i); // push outwards and add noise const noise = (Math.random() - 0.5) * 30 + (Math.sin(x * 0.03) + Math.cos(y * 0.02)) * 25; pos.setZ(i, -120 - Math.abs(y) * 0.6 + noise); } geom.computeVertexNormals(); const mat = new THREE.MeshStandardMaterial({ color: 0x2b2b2b, roughness: 1.0, metalness: 0.0, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(geom, mat); mesh.rotateX(-Math.PI / 2); mesh.receiveShadow = true; mesh.castShadow = false; mesh.position.set(0, -40, 0); return mesh; } function createWalls(stoneTexture) { const g = new THREE.Group(); const wallMat = new THREE.MeshStandardMaterial({ map: stoneTexture, roughness: 1.0, metalness: 0.0, normalMap: null }); const wallGeo = new THREE.BoxGeometry(220, 64, 20); const wall = new THREE.Mesh(wallGeo, wallMat); wall.castShadow = true; wall.receiveShadow = true; wall.position.set(0, 32, -20); g.add(wall); // battlements const merlonGeo = new THREE.BoxGeometry(8, 12, 22); for (let i = -10; i <= 10; i++) { const merlon = new THREE.Mesh(merlonGeo, wallMat); merlon.position.set(i * 10.2, 68, -20); merlon.castShadow = true; g.add(merlon); } return g; } function createTower(stoneTexture, height = 36, radius = 14) { const g = new THREE.Group(); const segs = 24; const cylGeo = new THREE.CylinderGeometry(radius, radius + 2, height, segs, 1, true); const mat = new THREE.MeshStandardMaterial({ map: stoneTexture, roughness: 1, metalness: 0 }); const tower = new THREE.Mesh(cylGeo, mat); tower.castShadow = true; tower.receiveShadow = true; tower.position.y = height / 2; g.add(tower); // cone roof const cone = new THREE.Mesh( new THREE.ConeGeometry(radius + 6, 26, 18), new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.9, metalness: 0.0 }) ); cone.position.y = height + 12; cone.castShadow = true; g.add(cone); // battlements ring const merlonGeo = new THREE.BoxGeometry(6, 8, 8); const ringCount = Math.floor((Math.PI * (radius * 2)) / 10); for (let i = 0; i < ringCount; i++) { const a = (i / ringCount) * Math.PI * 2; const mx = Math.cos(a) * (radius + 2); const mz = Math.sin(a) * (radius + 2); const merlon = new THREE.Mesh(merlonGeo, mat); merlon.position.set(mx, height + 2, mz); merlon.lookAt(0, height + 2, 0); merlon.castShadow = true; g.add(merlon); } return g; } function createKeep(stoneTexture) { const g = new THREE.Group(); const geo = new THREE.BoxGeometry(80, 90, 80); const mat = new THREE.MeshStandardMaterial({ map: stoneTexture, roughness: 1, metalness: 0 }); const mesh = new THREE.Mesh(geo, mat); mesh.castShadow = true; mesh.receiveShadow = true; g.add(mesh); // spires const spire = new THREE.Mesh(new THREE.ConeGeometry(16, 40, 12), new THREE.MeshStandardMaterial({ color: 0x191919, roughness: 0.9 })); spire.position.set(-22, 65, -18); spire.castShadow = true; g.add(spire); const spire2 = spire.clone(); spire2.position.set(26, 68, 28); g.add(spire2); return g; } function addGargoyles(group, stoneTexture) { const geom = new THREE.BoxGeometry(6, 6, 12); const mat = new THREE.MeshStandardMaterial({ map: stoneTexture, roughness: 1 }); const positions = [ [-60, 36, -26], [-68, 40, -10], [58, 42, 18], [52, 34, -8], [0, 52, 44] ]; positions.forEach(p => { const g = new THREE.Mesh(geom, mat); g.position.set(p[0], p[1], p[2]); g.rotation.y = Math.random() * Math.PI; g.castShadow = true; group.add(g); }); } function addWindowsAndTorches(group, torchGroup) { const warmMat = new THREE.MeshStandardMaterial({ color: 0xffa660, emissive: 0xff7744, emissiveIntensity: 1.2, roughness: 1 }); const darkMat = new THREE.MeshStandardMaterial({ color: 0x111111 }); // many small windows in keep const wGeo = new THREE.BoxGeometry(6, 12, 2); for (let y = 30; y <= 70; y += 12) { for (let x = -30; x <= 30; x += 12) { const window = new THREE.Mesh(wGeo, warmMat.clone()); window.position.set(x, y, 42); window.castShadow = false; window.receiveShadow = false; group.add(window); } } // torch lights (point lights) for warmth const torchPositions = [ [-46, 22, -16], [-12, 22, -34], [24, 24, -14], [54, 28, 8], [8, 60, 36] ]; torchPositions.forEach((p, i) => { const light = new THREE.PointLight(0xff9a44, 0.8, 90, 2); light.position.set(p[0], p[1], p[2]); light.castShadow = true; torchGroup.add(light); // small emissive plane as torch flicker const flame = new THREE.Mesh( new THREE.PlaneGeometry(6, 10), new THREE.MeshBasicMaterial({ color: 0xffaa33, transparent: true, opacity: 0.85 }) ); flame.position.copy(light.position); flame.translateZ(1.5); flame.lookAt(0, flame.position.y, 0); group.add(flame); }); } import * as THREE from 'three'; export function createFlags() { const group = new THREE.Group(); const mat = new THREE.ShaderMaterial({ vertexShader: ` uniform float time; varying vec2 vUv; void main() { vUv = uv; vec3 pos = position; float freq = 2.2; float amp = 4.0; pos.z += sin((pos.x + time * 8.0) * 0.6) * amp * (1.0 - uv.x); pos.y += sin((uv.x + time * 0.5) * freq) * 1.25 * (1.0 - uv.x); gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `, fragmentShader: ` varying vec2 vUv; void main() { vec3 c = mix(vec3(0.12, 0.04, 0.02), vec3(0.6,0.04,0.06), smoothstep(0.0, 1.0, vUv.x)); // torn edges float alpha = smoothstep(0.02, 0.0, vUv.y * (1.0 - vUv.x)); gl_FragColor = vec4(c, alpha); } `, uniforms: { time: { value: 0 } }, side: THREE.DoubleSide, transparent: true }); function makeFlag(x, y, z, ang = 0) { const geo = new THREE.PlaneGeometry(22, 12, 28, 8); const mesh = new THREE.Mesh(geo, mat); mesh.position.set(x, y, z); mesh.rotation.y = ang; mesh.castShadow = true; mesh.frustumCulled = false; group.add(mesh); } makeFlag(-58, 72, -10, -0.6); makeFlag(52, 92, 22, 0.7); makeFlag(8, 92, 40, 0.1); return group; } export function updateFlags(group, time) { group.traverse(c => { if (c.material && c.material.uniforms && c.material.uniforms.time) { c.material.uniforms.time.value = time; } }); } import * as THREE from 'three'; export function createRain(count = 10000) { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(count * 3); const velocities = new Float32Array(count); for (let i = 0; i < count; i++) { positions[i * 3 + 0] = (Math.random() - 0.5) * 800; positions[i * 3 + 1] = Math.random() * 400 + 40; positions[i * 3 + 2] = (Math.random() - 0.5) * 600; velocities[i] = 200 + Math.random() * 400; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 1)); const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0.0 }, uCamVel: { value: 0.0 } }, vertexShader: ` attribute float velocity; varying float vY; void main() { vec3 p = position; vY = p.y; gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0); gl_PointSize = 1.5 + velocity * 0.002; } `, fragmentShader: ` varying float vY; void main() { float a = smoothstep(0.0, 1.0, 1.0 - length(gl_PointCoord - 0.5) * 1.4); gl_FragColor = vec4(0.75, 0.85, 0.95, 0.55 * a); } `, transparent: true, depthWrite: false }); const points = new THREE.Points(geometry, material); points.frustumCulled = false; return { mesh: points, geometry, material }; } export function updateRain(rain, dt) { const pos = rain.geometry.attributes.position.array; const vel = rain.geometry.attributes.velocity.array; for (let i = 0; i < vel.length; i++) { pos[i * 3 + 1] -= vel[i] * dt; pos[i * 3 + 0] += Math.sin(i + dt * 10) * 6 * dt; // wind drift pos[i * 3 + 2] += Math.cos(i * 0.7) * 8 * dt; if (pos[i * 3 + 1] < -80) { pos[i * 3 + 1] = Math.random() * 300 + 80; pos[i * 3 + 0] = (Math.random() - 0.5) * 800; pos[i * 3 + 2] = (Math.random() - 0.5) * 600; } } rain.geometry.attributes.position.needsUpdate = true; rain.material.uniforms.uTime.value += dt; } export function createBirds(count = 10) { const group = new THREE.Group(); const birds = []; const geom = new THREE.PlaneGeometry(6, 4); const mat = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide }); for (let i = 0; i < count; i++) { const m = new THREE.Mesh(geom, mat); m.position.set((Math.random() - 0.5) * 400, 120 + Math.random() * 80, (Math.random() - 0.5) * 300); m.rotation.y = Math.random() * Math.PI * 2; m.scale.setScalar(1 + Math.random() * 0.8); m.frustumCulled = false; group.add(m); birds.push({ mesh: m, speed: 8 + Math.random() * 10, phase: Math.random() * Math.PI * 2 }); } return { group, birds }; } export function updateBirds(birdsObj, dt) { birdsObj.birds.forEach(b => { b.phase += dt * (2 + Math.random() * 2); const m = b.mesh; m.position.x += Math.cos(b.phase) * b.speed * dt; m.position.z += Math.sin(b.phase * 0.9) * b.speed * dt; m.position.y += Math.sin(b.phase * 1.2) * 0.6; m.rotation.z = Math.sin(b.phase) * 0.4; // wrap if (m.position.x > 500) m.position.x = -500; if (m.position.x < -500) m.position.x = 500; }); } // Lightning controller export function startLightning({ scene, moon, castle }) { const flash = { lastTime: 0, active: false, intensity: 0, update(t) { // random flash generator if (!this.active && Math.random() < 0.002) { this.active = true; this.intensity = 0; this.lastTime = t; } if (this.active) { const elapsed = t - this.lastTime; // quick bright spike then fade this.intensity = Math.max(0, Math.sin(elapsed * 30) * (1.0 - elapsed * 1.2) * 6.0); moon.intensity = 0.6 + this.intensity * 1.8; // add quick directional fill light if (this.intensity > 0.8) { const point = new THREE.PointLight(0xbfe6ff, 8 * this.intensity, 800, 2); point.position.set((Math.random() - 0.5) * 400, 250, (Math.random() - 0.5) * 400); scene.add(point); setTimeout(() => scene.remove(point), 120); } if (elapsed > 0.7) { this.active = false; moon.intensity = 0.6; } } } }; return flash; } // Utility helpers export function createStoneTexture({ size = 512, seed = 123 } = {}) { const canvas = document.createElement('canvas'); canvas.width = canvas.height = size; const ctx = canvas.getContext('2d'); // simple seeded random let s = seed; function rnd() { s = (s * 16807) % 2147483647; return (s % 1000) / 1000; } // base ctx.fillStyle = '#2f342f'; ctx.fillRect(0, 0, size, size); // layered noise for rough stone for (let i = 0; i < 40000; i++) { const x = Math.floor(rnd() * size); const y = Math.floor(rnd() * size); const shade = Math.floor(80 + rnd() * 80); ctx.fillStyle = `rgba(${shade},${shade - 10},${shade - 12},${0.06 + rnd() * 0.08})`; ctx.fillRect(x, y, 1, 1); } // some larger blotches for (let i = 0; i < 30; i++) { const rx = rnd() * size; const ry = rnd() * size; const r = 10 + rnd() * (size * 0.14); const g = ctx.createRadialGradient(rx, ry, r * 0.1, rx, ry, r); const shade = 80 + Math.floor(rnd() * 60); g.addColorStop(0, `rgba(${shade+40},${shade+10},${shade+5},0.12)`); g.addColorStop(1, `rgba(${shade-10},${shade-20},${shade-28},0.0)`); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(rx, ry, r, 0, Math.PI * 2); ctx.fill(); } // add subtle cracks ctx.strokeStyle = 'rgba(20,20,20,0.08)'; ctx.lineWidth = 1; for (let i = 0; i < 180; i++) { ctx.beginPath(); let x = rnd() * size, y = rnd() * size; ctx.moveTo(x, y); for (let j = 0; j < 30; j++) { x += (rnd() - 0.5) * 20; y += (rnd() - 0.5) * 20; ctx.lineTo(x, y); } ctx.stroke(); } const tex = new THREE.CanvasTexture(canvas); tex.wrapS = tex.wrapT = THREE.RepeatWrapping; tex.repeat.set(4, 2.4); tex.anisotropy = 4; return tex; } // Import three after function to avoid bundler warnings in this environment import * as THREE from 'three';