Old European Castle

Old European Castle — Three.js

Old European Castle — procedural high-detail demo

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { createTextures } from './textures.js'; import { createCastle } from './castle.js'; import { createSky } from './sky.js'; // Renderer const container = document.getElementById('canvas-container'); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild(renderer.domElement); // Scene & Camera const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000010, 0.0006); const camera = new THREE.PerspectiveCamera(40, container.clientWidth / container.clientHeight, 0.1, 2000); camera.position.set(80, 40, 120); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 20, 0); controls.enableDamping = true; controls.minDistance = 20; controls.maxDistance = 300; controls.maxPolarAngle = Math.PI / 2.05; // Lights (moon as directional light) const ambient = new THREE.AmbientLight(0xffffff, 0.25); scene.add(ambient); const moonLight = new THREE.DirectionalLight(0xe6f0ff, 1.2); moonLight.position.set(-80, 120, 40); moonLight.castShadow = true; moonLight.shadow.mapSize.set(2048, 2048); moonLight.shadow.camera.left = -200; moonLight.shadow.camera.right = 200; moonLight.shadow.camera.top = 200; moonLight.shadow.camera.bottom = -200; scene.add(moonLight); // Ground const groundMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 1 }); const ground = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), groundMat); ground.rotation.x = -Math.PI / 2; ground.position.y = 0; ground.receiveShadow = true; scene.add(ground); // Create procedural textures and scene geometry const textures = createTextures(); createCastle(scene, textures); createSky(scene, textures); // Resize handling window.addEventListener('resize', onWindowResize); function onWindowResize() { const w = container.clientWidth; const h = container.clientHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); renderer.setPixelRatio(window.devicePixelRatio); } // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const dt = clock.getDelta(); controls.update(); renderer.render(scene, camera); } animate(); import * as THREE from 'three'; // Procedurally generate high-resolution textures (canvas-based) export function createTextures() { const brick = generateBrickTexture(2048, 1024); brick.wrapS = brick.wrapT = THREE.RepeatWrapping; brick.repeat.set(6, 3); const wood = generateWoodTexture(1024, 1024); wood.wrapS = wood.wrapT = THREE.RepeatWrapping; wood.repeat.set(1, 1); const moon = generateMoonTexture(2048, 2048); const windowLight = generateWindowGlow(512, 512); return { brick, wood, moon, windowLight }; } function generateBrickTexture(w, h) { const c = document.createElement('canvas'); c.width = w; c.height = h; const ctx = c.getContext('2d'); // base stone color ctx.fillStyle = '#7a5b4b'; ctx.fillRect(0, 0, w, h); const mortar = '#bdbdbd'; const brickW = Math.floor(w / 20); const brickH = Math.floor(h / 14); for (let y = 0; y < h + brickH; y += brickH) { const offset = (Math.floor(y / brickH) % 2) ? brickW / 2 : 0; for (let x = -offset; x < w + brickW; x += brickW) { // randomize brick color slightly const r = 120 + Math.floor(Math.random() * 40) - 20; const g = 90 + Math.floor(Math.random() * 40) - 20; const b = 80 + Math.floor(Math.random() * 40) - 20; ctx.fillStyle = `rgb(${r},${g},${b})`; ctx.fillRect(x + 2, y + 2, brickW - 4, brickH - 4); // add subtle shading const grad = ctx.createLinearGradient(x, y, x + brickW, y + brickH); grad.addColorStop(0, 'rgba(0,0,0,0.06)'); grad.addColorStop(1, 'rgba(255,255,255,0.02)'); ctx.fillStyle = grad; ctx.fillRect(x + 2, y + 2, brickW - 4, brickH - 4); } } // mortar lines ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = mortar; for (let y = 0; y < h + brickH; y += brickH) { const offset = (Math.floor(y / brickH) % 2) ? brickW / 2 : 0; for (let x = -offset; x < w + brickW; x += brickW) { ctx.fillRect(x, y, brickW, 2); // horizontal mortar } } const tex = new THREE.CanvasTexture(c); tex.anisotropy = 16; tex.encoding = THREE.sRGBEncoding; return tex; } function generateWoodTexture(w, h) { const c = document.createElement('canvas'); c.width = w; c.height = h; const ctx = c.getContext('2d'); // base ctx.fillStyle = '#603a2f'; ctx.fillRect(0, 0, w, h); // planks const plankCount = 6; const plankH = Math.floor(h / plankCount); for (let i = 0; i < plankCount; i++) { const xJitter = Math.random() * 30 - 15; const r = 90 + Math.floor(Math.random() * 40); ctx.fillStyle = `rgb(${r},${Math.floor(r * 0.6)},${Math.floor(r * 0.5)})`; ctx.fillRect(0, i * plankH + xJitter, w, plankH - 8); // grain ctx.beginPath(); ctx.strokeStyle = `rgba(0,0,0,0.08)`; ctx.lineWidth = 2; for (let g = 0; g < 20; g++) { const y = i * plankH + Math.random() * plankH; ctx.moveTo(0, y); ctx.quadraticCurveTo(w * 0.5, y + Math.random() * 8 - 4, w, y + Math.random() * 6 - 3); } ctx.stroke(); } const tex = new THREE.CanvasTexture(c); tex.anisotropy = 16; tex.encoding = THREE.sRGBEncoding; return tex; } function generateMoonTexture(w, h) { const c = document.createElement('canvas'); c.width = w; c.height = h; const ctx = c.getContext('2d'); // black background ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, w, h); // base moon const cx = w / 2; const cy = h / 2; const r = Math.min(w, h) * 0.42; const grad = ctx.createRadialGradient(cx - r * 0.2, cy - r * 0.2, r * 0.1, cx, cy, r); grad.addColorStop(0, '#ffffff'); grad.addColorStop(1, '#d5d9de'); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill(); // craters for (let i = 0; i < 70; i++) { const cr = r * (0.01 + Math.random() * 0.06); const angle = Math.random() * Math.PI * 2; const dist = Math.random() * r * 0.8; const x = cx + Math.cos(angle) * dist; const y = cy + Math.sin(angle) * dist; ctx.beginPath(); ctx.fillStyle = `rgba(0,0,0,${0.12 + Math.random() * 0.2})`; ctx.arc(x, y, cr, 0, Math.PI * 2); ctx.fill(); } const tex = new THREE.CanvasTexture(c); tex.anisotropy = 16; tex.encoding = THREE.sRGBEncoding; return tex; } function generateWindowGlow(w, h) { const c = document.createElement('canvas'); c.width = w; c.height = h; const ctx = c.getContext('2d'); ctx.fillStyle = 'black'; ctx.fillRect(0, 0, w, h); const grad = ctx.createRadialGradient(w / 2, h / 2, 10, w / 2, h / 2, Math.max(w, h) / 2); grad.addColorStop(0, 'rgba(255,220,150,1)'); grad.addColorStop(0.2, 'rgba(255,200,120,0.6)'); grad.addColorStop(0.6, 'rgba(255,150,80,0.15)'); grad.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h); const tex = new THREE.CanvasTexture(c); tex.anisotropy = 4; tex.encoding = THREE.sRGBEncoding; tex.wrapS = tex.wrapT = THREE.ClampToEdgeWrapping; return tex; } import * as THREE from 'three'; export function createCastle(scene, textures) { const group = new THREE.Group(); // Main keep const keep = createKeep(textures.brick, textures.wood); keep.position.set(0, 28, 0); group.add(keep); // Outer curtain walls surrounding the keep const wallGroup = new THREE.Group(); const wallHeight = 20; const wallThickness = 6; const wallLength = 180; // four walls const west = makeWall(wallLength, wallHeight, wallThickness, textures.brick); west.position.set(0, wallHeight / 2 + 0.5, -wallLength / 2); wallGroup.add(west); const east = makeWall(wallLength, wallHeight, wallThickness, textures.brick); east.position.set(0, wallHeight / 2 + 0.5, wallLength / 2); wallGroup.add(east); const north = makeWall(wallThickness, wallHeight, wallLength, textures.brick); north.position.set(-wallLength / 2, wallHeight / 2 + 0.5, 0); wallGroup.add(north); const south = makeWall(wallThickness, wallHeight, wallLength, textures.brick); south.position.set(wallLength / 2, wallHeight / 2 + 0.5, 0); wallGroup.add(south); // Gatehouse (front) const gate = createGatehouse(textures.brick, textures.wood); gate.position.set(0, 12, wallLength / 2 + 1); gate.rotation.y = Math.PI; wallGroup.add(gate); // Towers at corners const towerPositions = [ [-wallLength / 2 + 6, 0, -wallLength / 2 + 6], [-wallLength / 2 + 6, 0, wallLength / 2 - 6], [wallLength / 2 - 6, 0, -wallLength / 2 + 6], [wallLength / 2 - 6, 0, wallLength / 2 - 6] ]; towerPositions.forEach(pos => { const t = createTower(textures.brick); t.position.set(pos[0], 0, pos[2]); wallGroup.add(t); }); wallGroup.position.y = 0.5; group.add(wallGroup); // small vegetation and rubble near base - for realism a few boxes for (let i = 0; i < 30; i++) { const stone = new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1.5), new THREE.MeshStandardMaterial({ color: 0x2b2b2b, roughness: 1 })); stone.position.set((Math.random() - 0.5) * 200, 0.5, (Math.random() - 0.5) * 200); stone.rotation.y = Math.random() * Math.PI; stone.castShadow = false; stone.receiveShadow = true; group.add(stone); } group.traverse(obj => { if (obj.isMesh) { obj.castShadow = true; obj.receiveShadow = true; } }); scene.add(group); return group; } function createKeep(brickTex, woodTex) { const group = new THREE.Group(); // main box const mainGeo = new THREE.BoxGeometry(40, 50, 36, 16, 16, 16); const mainMat = new THREE.MeshStandardMaterial({ map: brickTex, roughness: 1 }); const main = new THREE.Mesh(mainGeo, mainMat); main.position.y = 25; group.add(main); // battlements along top const battlement = new THREE.Group(); const width = 40; const depth = 36; const tile = 4; for (let x = -width / 2; x < width / 2; x += tile) { const b = new THREE.Mesh(new THREE.BoxGeometry(2.5, 4, 4), mainMat); b.position.set(x + tile / 2, 50 + 2, -depth / 2 - 2); battlement.add(b); const b2 = b.clone(); b2.position.z = depth / 2 + 2; battlement.add(b2); } for (let z = -depth / 2; z < depth / 2; z += tile) { const b = new THREE.Mesh(new THREE.BoxGeometry(2.5, 4, 4), mainMat); b.position.set(-width / 2 - 2, 50 + 2, z + tile / 2); b.rotation.y = Math.PI / 2; battlement.add(b); const b2 = b.clone(); b2.position.x = width / 2 + 2; battlement.add(b2); } group.add(battlement); // arched windows with glowing interior const windowGeo = new THREE.BoxGeometry(3.5, 8, 0.5); const glassMat = new THREE.MeshStandardMaterial({ color: 0x111133, emissive: 0x222244, emissiveIntensity: 0.6, transparent: true, opacity: 0.9 }); for (let i = 0; i < 6; i++) { const w = new THREE.Mesh(windowGeo, glassMat); w.position.set(-12 + i * 5, 28, -18.1); group.add(w); const w2 = w.clone(); w2.position.z = 18.1; group.add(w2); } // wooden door const door = new THREE.Mesh(new THREE.BoxGeometry(8, 14, 2.5), new THREE.MeshStandardMaterial({ map: woodTex, roughness: 1 })); door.position.set(0, 8, 18.01); group.add(door); return group; } function makeWall(w, h, d, brickTex) { const geo = new THREE.BoxGeometry(w, h, d, Math.max(2, Math.floor(w / 12)), Math.max(2, Math.floor(h / 8)), 2); const mat = new THREE.MeshStandardMaterial({ map: brickTex, roughness: 1 }); const mesh = new THREE.Mesh(geo, mat); // add battlements on top edge const battlements = new THREE.Group(); const count = Math.floor(w / 5); for (let i = -count / 2; i < count / 2; i++) { const b = new THREE.Mesh(new THREE.BoxGeometry(3.5, 4, d + 0.2), mat); b.position.set((i + 0.5) * 5, h / 2 + 2, 0); battlements.add(b); } const group = new THREE.Group(); group.add(mesh); battlements.position.y = 0; group.add(battlements); return group; } function createTower(brickTex) { const group = new THREE.Group(); const radius = 10; const height = 36; const cylGeo = new THREE.CylinderGeometry(radius, radius, height, 32, 16); const mat = new THREE.MeshStandardMaterial({ map: brickTex, roughness: 1 }); const cyl = new THREE.Mesh(cylGeo, mat); cyl.position.y = height / 2 + 1; group.add(cyl); // conical roof const roofGeo = new THREE.ConeGeometry(12, 14, 32); const roofMat = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 1, metalness: 0 }); const roof = new THREE.Mesh(roofGeo, roofMat); roof.position.y = height + 8; group.add(roof); // small slit windows for (let i = 0; i < 6; i++) { const ang = (i / 6) * Math.PI * 2; const x = Math.cos(ang) * (radius - 1.5); const z = Math.sin(ang) * (radius - 1.5); const slit = new THREE.Mesh(new THREE.BoxGeometry(1.2, 6, 0.5), new THREE.MeshStandardMaterial({ color: 0x111122, emissive: 0x222244, emissiveIntensity: 0.6 })); slit.position.set(x, height / 2 + 6, z); slit.lookAt(0, height / 2 + 6, 0); group.add(slit); } // small battlements ring const ring = new THREE.Group(); for (let a = 0; a < Math.PI * 2; a += Math.PI / 4) { const b = new THREE.Mesh(new THREE.BoxGeometry(3, 4, 3), mat); b.position.set(Math.cos(a) * (radius + 2.5), height + 2, Math.sin(a) * (radius + 2.5)); ring.add(b); } group.add(ring); return group; } function createGatehouse(brickTex, woodTex) { const group = new THREE.Group(); const mat = new THREE.MeshStandardMaterial({ map: brickTex, roughness: 1 }); const gateBody = new THREE.Mesh(new THREE.BoxGeometry(28, 24, 12), mat); gateBody.position.y = 12; group.add(gateBody); // tower parts const left = new THREE.Mesh(new THREE.BoxGeometry(10, 30, 14), mat); left.position.set(-24, 15, 0); group.add(left); const right = left.clone(); right.position.x = 24; group.add(right); // gate door (wood) const door = new THREE.Mesh(new THREE.BoxGeometry(12, 14, 3), new THREE.MeshStandardMaterial({ map: woodTex, roughness: 1 })); door.position.set(0, 7, 9); group.add(door); // small windows const glass = new THREE.Mesh(new THREE.BoxGeometry(3, 6, 0.5), new THREE.MeshStandardMaterial({ color: 0x101030, emissive: 0x222244, emissiveIntensity: 0.6, transparent: true, opacity: 0.95 })); glass.position.set(-10, 16, 9.1); group.add(glass); const glass2 = glass.clone(); glass2.position.set(10, 16, 9.1); group.add(glass2); // battlements const batt = new THREE.Group(); for (let i = -14; i < 14; i += 4) { const b = new THREE.Mesh(new THREE.BoxGeometry(3, 4, 6), mat); b.position.set(i, 26, 0); batt.add(b); } batt.position.z = 0; group.add(batt); return group; } import * as THREE from 'three'; export function createSky(scene, textures) { // Starfield using Points const starsGeo = new THREE.BufferGeometry(); const starCount = 4000; const positions = new Float32Array(starCount * 3); const sizes = new Float32Array(starCount); const radius = 900; for (let i = 0; i < starCount; i++) { const theta = Math.random() * Math.PI * 2; const phi = Math.acos((Math.random() * 2) - 1); const r = radius + Math.random() * 40; const x = r * Math.sin(phi) * Math.cos(theta); const y = r * Math.sin(phi) * Math.sin(theta); const z = r * Math.cos(phi); positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; sizes[i] = Math.random() * 1.5 + 0.2; } starsGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3)); starsGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 1.2, sizeAttenuation: true, depthWrite: false, blending: THREE.AdditiveBlending, transparent: true, opacity: 0.9 }); const starPoints = new THREE.Points(starsGeo, starMat); scene.add(starPoints); // Large moon const moonGeo = new THREE.SphereGeometry(36, 64, 64); const moonMat = new THREE.MeshStandardMaterial({ map: textures.moon, emissive: 0xffffff, emissiveIntensity: 0.12, metalness: 0, roughness: 1 }); const moon = new THREE.Mesh(moonGeo, moonMat); moon.position.set(-120, 160, -60); moon.rotation.y = 0.2; moon.receiveShadow = false; moon.castShadow = false; scene.add(moon); // subtle nebula / gradient using huge inverted sphere const skyGeo = new THREE.SphereGeometry(1000, 32, 32); const skyMat = new THREE.MeshBasicMaterial({ color: 0x040417, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); }