Futuristic BorderGard

Futuristic BorderGard import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; // Scene setup with environment map const scene = new THREE.Scene(); const rgbeLoader = new RGBELoader(); rgbeLoader.load('https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_2k.hdr', (texture) => { texture.mapping = THREE.EquirectangularReflectionMapping; scene.environment = texture; scene.background = texture; }); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 15); // Renderer with better settings const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.5; document.body.appendChild(renderer.domElement); // Enhanced controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 5; controls.maxDistance = 30; controls.maxPolarAngle = Math.PI * 0.9; // Advanced lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(5, 10, 7); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; scene.add(directionalLight); // Create futuristic BorderGard unit function createBorderGard() { const group = new THREE.Group(); // Base with sci-fi details const baseGeometry = new THREE.CylinderGeometry(3, 3, 1, 32); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.3, metalness: 0.8, normalScale: new THREE.Vector2(0.5, 0.5) }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 0.5; base.castShadow = true; base.receiveShadow = true; // Base details const baseDetailGeometry = new THREE.TorusGeometry(2.8, 0.1, 16, 32); const baseDetailMaterial = new THREE.MeshStandardMaterial({ color: 0x00a8ff, emissive: 0x00a8ff, emissiveIntensity: 0.5, metalness: 0.9, roughness: 0.1 }); const baseDetail = new THREE.Mesh(baseDetailGeometry, baseDetailMaterial); baseDetail.position.y = 0.95; baseDetail.rotation.x = Math.PI / 2; group.add(base); group.add(baseDetail); // Main cylinder with armored segments const cylinderHeight = 4; const segmentHeight = 0.8; const segmentCount = Math.floor(cylinderHeight / segmentHeight); for (let i = 0; i < segmentCount; i++) { const segmentGeometry = new THREE.CylinderGeometry(2, 2, segmentHeight - 0.1, 32); const segmentMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.2, metalness: 0.9, normalScale: new THREE.Vector2(0.3, 0.3) }); const segment = new THREE.Mesh(segmentGeometry, segmentMaterial); segment.position.y = 1.5 + (i * segmentHeight); segment.castShadow = true; segment.receiveShadow = true; // Segment details const detailGeometry = new THREE.TorusGeometry(2.05, 0.05, 16, 32); const detailMaterial = new THREE.MeshStandardMaterial({ color: 0x00a8ff, emissive: 0x00a8ff, emissiveIntensity: 0.3, metalness: 0.9, roughness: 0.1 }); const detailTop = new THREE.Mesh(detailGeometry, detailMaterial); detailTop.position.y = segmentHeight / 2; detailTop.rotation.x = Math.PI / 2; segment.add(detailTop); const detailBottom = detailTop.clone(); detailBottom.position.y = -segmentHeight / 2; segment.add(detailBottom); group.add(segment); } // Advanced antenna dome const domeGeometry = new THREE.SphereGeometry(1.5, 32, 32, 0, Math.PI * 2, 0, Math.PI * 0.5); const domeMaterial = new THREE.MeshPhysicalMaterial({ color: 0x111122, roughness: 0.05, metalness: 0.9, transmission: 0.7, thickness: 0.5, ior: 1.5, clearcoat: 1, clearcoatRoughness: 0.1 }); const dome = new THREE.Mesh(domeGeometry, domeMaterial); dome.position.y = 6; dome.rotation.x = Math.PI; dome.castShadow = true; group.add(dome); // Futuristic antenna array const antennaGroup = new THREE.Group(); antennaGroup.position.y = 6.5; // Main antenna const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.05, 1.5, 8); const antennaMaterial = new THREE.MeshStandardMaterial({ color: 0x00a8ff, emissive: 0x00a8ff, emissiveIntensity: 0.5, metalness: 0.9, roughness: 0.1 }); const mainAntenna = new THREE.Mesh(antennaGeometry, antennaMaterial); mainAntenna.position.y = 0.75; antennaGroup.add(mainAntenna); // Side antennas for (let i = 0; i < 4; i++) { const angle = (i / 4) * Math.PI * 2; const sideAntenna = new THREE.Mesh( new THREE.ConeGeometry(0.1, 0.8, 8), antennaMaterial ); sideAntenna.position.set(Math.cos(angle) * 0.8, 0.4, Math.sin(angle) * 0.8); sideAntenna.rotation.x = Math.PI / 4; sideAntenna.rotation.y = angle; antennaGroup.add(sideAntenna); } // Radar dish const dishGeometry = new THREE.CircleGeometry(0.6, 32); const dishMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, metalness: 0.9, roughness: 0.1, side: THREE.DoubleSide }); const dish = new THREE.Mesh(dishGeometry, dishMaterial); dish.position.y = 1.6; dish.rotation.x = Math.PI / 2; antennaGroup.add(dish); group.add(antennaGroup); // Holographic display const displayGeometry = new THREE.PlaneGeometry(2, 1); const displayTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/hardwood2_diffuse.jpg'); const displayMaterial = new THREE.MeshStandardMaterial({ map: displayTexture, emissive: 0x00a8ff, emissiveIntensity: 0.7, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); const display = new THREE.Mesh(displayGeometry, displayMaterial); display.position.set(0, 3.5, 2.1); display.rotation.y = Math.PI; group.add(display); // Security cameras for (let i = 0; i < 4; i++) { const angle = (i / 4) * Math.PI * 2; const cameraGroup = new THREE.Group(); cameraGroup.position.set( Math.cos(angle) * 2.1, 4, Math.sin(angle) * 2.1 ); cameraGroup.lookAt(0, 4, 0); const cameraBase = new THREE.Mesh( new THREE.BoxGeometry(0.3, 0.3, 0.3), new THREE.MeshStandardMaterial({ color: 0x111111 }) ); cameraGroup.add(cameraBase); const cameraLens = new THREE.Mesh( new THREE.SphereGeometry(0.15, 16, 16, 0, Math.PI * 2, 0, Math.PI * 0.5), new THREE.MeshStandardMaterial({ color: 0x000000, metalness: 0.9, roughness: 0.05 }) ); cameraLens.position.z = 0.2; cameraLens.rotation.x = Math.PI; cameraGroup.add(cameraLens); const cameraLight = new THREE.Mesh( new THREE.SphereGeometry(0.1, 8, 8), new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 0.5 }) ); cameraLight.position.set(0.2, 0.2, 0.2); cameraGroup.add(cameraLight); group.add(cameraGroup); } return group; } const borderGard = createBorderGard(); scene.add(borderGard); // Futuristic ground plane const groundGeometry = new THREE.CircleGeometry(50, 64); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.7, metalness: 0.5 }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Hexagonal grid helper const gridHelper = new THREE.GridHelper(50, 50, 0x00a8ff, 0x003366); scene.add(gridHelper); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation loop with advanced effects function animate() { requestAnimationFrame(animate); // Rotate antenna dome and array const dome = borderGard.children.find(child => child.children[0]?.geometry.type === 'SphereGeometry'); if (dome) { dome.rotation.y += 0.02; } const antennaGroup = borderGard.children.find(child => child.children[0]?.geometry.type === 'CylinderGeometry'); if (antennaGroup) { antennaGroup.rotation.y += 0.01; } // Pulsing emissive effects const time = Date.now() * 0.001; borderGard.traverse((child) => { if (child.material && child.material.emissive) { child.material.emissiveIntensity = 0.3 + Math.sin(time * 2) * 0.2; } }); controls.update(); renderer.render(scene, camera); } animate();