Ancient Castle - Three.js

Ancient Castle — orbit to explore

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; export function initRenderer(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); return renderer; } export function createScene() { const scene = new THREE.Scene(); scene.background = new THREE.Color(0xbfd1e5); scene.fog = new THREE.Fog(0xbfd1e5, 60, 200); return scene; } export function createCamera(container) { const aspect = container.clientWidth / container.clientHeight; const camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000); camera.position.set(40, 25, 40); camera.lookAt(0, 6, 0); return camera; } export function createLights(scene) { const ambient = new THREE.AmbientLight(0xffffff, 0.35); scene.add(ambient); const dir = new THREE.DirectionalLight(0xfff8ea, 0.9); dir.position.set(50, 80, 10); dir.castShadow = true; dir.shadow.camera.left = -80; dir.shadow.camera.right = 80; dir.shadow.camera.top = 80; dir.shadow.camera.bottom = -80; dir.shadow.mapSize.set(2048, 2048); scene.add(dir); // Warm fill light to hint torches const fill = new THREE.PointLight(0xffd8a8, 0.15); fill.position.set(-30, 20, -10); scene.add(fill); } export function createGround(scene) { const geo = new THREE.PlaneGeometry(400, 400); const mat = new THREE.MeshStandardMaterial({ color: 0x48554a, roughness: 1 }); const mesh = new THREE.Mesh(geo, mat); mesh.rotation.x = -Math.PI / 2; mesh.receiveShadow = true; mesh.position.y = 0; scene.add(mesh); // simple blended ground tint under castle const circleGeo = new THREE.CircleGeometry(55, 64); const circleMat = new THREE.MeshStandardMaterial({ color: 0x6b6f5f, roughness: 1 }); const circle = new THREE.Mesh(circleGeo, circleMat); circle.rotation.x = -Math.PI / 2; circle.position.y = 0.01; scene.add(circle); } export function createControls(camera, rendererDom) { const controls = new OrbitControls(camera, rendererDom); controls.target.set(0, 6, 0); controls.enableDamping = true; controls.maxPolarAngle = Math.PI / 2.2; controls.minDistance = 10; controls.maxDistance = 150; return controls; } import * as THREE from 'three'; function makeStoneMaterial() { return new THREE.MeshStandardMaterial({ color: 0x8b8f86, roughness: 1.0, metalness: 0.0 }); } function addCrenellations(group, length, startX, topY, depth, spacing = 2.2) { const mat = makeStoneMaterial(); const b = Math.floor(length / spacing); const boxGeo = new THREE.BoxGeometry(1.6, 1.2, depth); for (let i = 0; i <= b; i++) { const x = startX + i * spacing; const brick = new THREE.Mesh(boxGeo, mat); brick.position.set(x, topY, 0); brick.castShadow = true; brick.receiveShadow = true; group.add(brick); } } export function createCastle() { const castle = new THREE.Group(); const wallMat = makeStoneMaterial(); // Main rectangular curtain wall const wallLength = 44; const wallHeight = 12; const wallThickness = 6; const wallGeo = new THREE.BoxGeometry(wallLength, wallHeight, wallThickness); const wall = new THREE.Mesh(wallGeo, wallMat); wall.position.y = wallHeight / 2; wall.castShadow = true; wall.receiveShadow = true; castle.add(wall); // Towers at corners (4) const towerRadius = 4; const towerHeight = 18; const cylGeo = new THREE.CylinderGeometry(towerRadius, towerRadius, towerHeight, 32); const towerOffsets = [ { x: wallLength / 2 - towerRadius, z: wallThickness / 2 - 1 }, { x: -wallLength / 2 + towerRadius, z: wallThickness / 2 - 1 }, { x: wallLength / 2 - towerRadius, z: -wallThickness / 2 + 1 }, { x: -wallLength / 2 + towerRadius, z: -wallThickness / 2 + 1 } ]; towerOffsets.forEach((o) => { const tower = new THREE.Mesh(cylGeo, wallMat); tower.position.set(o.x, towerHeight / 2, o.z); tower.castShadow = true; tower.receiveShadow = true; castle.add(tower); // tower top crenellations const ring = new THREE.Group(); const crenGeo = new THREE.BoxGeometry(1.6, 1.2, 1.6); const ringCount = Math.floor((Math.PI * towerRadius * 2) / 2); for (let i = 0; i < ringCount; i++) { const angle = (i / ringCount) * Math.PI * 2; const x = Math.cos(angle) * (towerRadius + 0.6); const z = Math.sin(angle) * (towerRadius + 0.6); const brick = new THREE.Mesh(crenGeo, wallMat); brick.position.set(x, towerHeight - 0.6, z); brick.lookAt(0, towerHeight - 0.6, 0); brick.castShadow = true; ring.add(brick); } ring.position.set(o.x, 0, o.z); castle.add(ring); // small torch-like point light at each tower (will be animated) const torch = new THREE.PointLight(0xffa955, 0.8, 25, 2); torch.position.set(o.x, towerHeight - 5, o.z); torch.userData = { baseIntensity: 0.8 }; castle.add(torch); }); // Gatehouse (simple arched entrance) const gateWidth = 8; const gateHeight = 10; const gateDepth = wallThickness + 0.1; const gateGeo = new THREE.BoxGeometry(gateWidth, gateHeight, gateDepth); const gate = new THREE.Mesh(gateGeo, wallMat); gate.position.set(0, gateHeight / 2 - 0.5, wallThickness / 2 + 0.05); gate.castShadow = true; gate.receiveShadow = true; castle.add(gate); // fake arch by subtracting with a darker plane (visual only) const doorGeo = new THREE.BoxGeometry(gateWidth - 2, gateHeight - 2, 0.6); const doorMat = new THREE.MeshStandardMaterial({ color: 0x241b17, roughness: 1 }); const door = new THREE.Mesh(doorGeo, doorMat); door.position.set(0, (gateHeight / 2) - 1, wallThickness / 2 + 0.4); door.castShadow = true; castle.add(door); // battlements on top of main wall const battlementGroup = new THREE.Group(); addCrenellations(battlementGroup, wallLength, -wallLength / 2 + 1, wallHeight - 0.6, 1.8, 2.0); battlementGroup.position.z = wallThickness / 2 + 0.01; castle.add(battlementGroup); const battlementGroupBack = battlementGroup.clone(); battlementGroupBack.position.z = - (wallThickness / 2 + 0.01); castle.add(battlementGroupBack); // small parapet along center line (top) const centerParapet = new THREE.BoxGeometry(wallLength, 1.2, 1.6); const topBar = new THREE.Mesh(centerParapet, wallMat); topBar.position.set(0, wallHeight - 0.6, 0); topBar.castShadow = true; castle.add(topBar); // add some rubble/stones near base to break silhouette const rubbleGeo = new THREE.BoxGeometry(1.2, 0.6, 0.8); for (let i = 0; i < 40; i++) { const r = new THREE.Mesh(rubbleGeo, wallMat); r.position.set( (Math.random() - 0.5) * (wallLength + 10), 0.3, (Math.random() - 0.5) * (wallThickness + 20) ); r.rotation.y = Math.random() * Math.PI; r.castShadow = true; r.receiveShadow = true; castle.add(r); } // raise castle slightly above ground castle.position.y = 0; // tag torches for external animation castle.userData.torches = castle.children.filter(c => c.isPointLight); return castle; } import * as THREE from 'three'; import { initRenderer, createScene, createCamera, createLights, createGround, createControls } from './scene.js'; import { createCastle } from './castle.js'; const container = document.getElementById('canvas-container'); const renderer = initRenderer(container); const scene = createScene(); const camera = createCamera(container); createLights(scene); createGround(scene); const controls = createControls(camera, renderer.domElement); // Create and add castle const castle = createCastle(); scene.add(castle); // small rock mound under gate to elevate visually const moundGeo = new THREE.ConeGeometry(10, 3, 24); const moundMat = new THREE.MeshStandardMaterial({ color: 0x5a5f55, roughness: 1 }); const mound = new THREE.Mesh(moundGeo, moundMat); mound.rotation.x = Math.PI; mound.position.set(0, 1.3, 8); mound.castShadow = false; mound.receiveShadow = true; scene.add(mound); // Enable shadows renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; scene.traverse((c) => { if (c.isMesh) { c.castShadow = true; c.receiveShadow = true; } }); // Resize handling window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); } // Animation loop with subtle torch flicker const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const t = clock.getElapsedTime(); // gentle castle ambient movement (small sway) castle.rotation.y = Math.sin(t * 0.03) * 0.005; // torch flicker if (castle.userData.torches) { castle.userData.torches.forEach((light, i) => { const flicker = 0.6 + Math.abs(Math.sin(t * (1 + i * 0.3) * 6)) * 0.8; light.intensity = light.userData.baseIntensity * flicker; const jitter = (Math.random() - 0.5) * 0.02; light.position.x += jitter; light.position.z += jitter; }); } controls.update(); renderer.render(scene, camera); } animate();