चलने योग्य 3D हवाई जहाज का आंतरिक भाग प्रॉम्प्ट (Claude Code + Three.js)

// // Fullscreen experience: 3D airplane model with first-person walk-inside // Uses Three.js (r128+) with PointerLockControls for FPS navigation // The airplane is a low-poly model built from primitives (no external assets) // let scene, camera, renderer, controls; let airplane; // Group containing all airplane parts let clock = new THREE.Clock(); let velocity = new THREE.Vector3(); let direction = new THREE.Vector3(); let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false; let canJump = false; // Not used for walking, but kept for completeness init(); animate(); function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87CEEB); // Sky blue scene.fog = new THREE.Fog(0x87CEEB, 50, 200); // Camera (first-person) camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 2, 0); // Start at ground level // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // Lighting const ambientLight = new THREE.AmbientLight(0x404040, 0.6); scene.add(ambientLight); const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(10, 20, 10); dirLight.castShadow = true; scene.add(dirLight); // Ground (for reference) const groundGeo = new THREE.PlaneGeometry(200, 200); const groundMat = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotation.x = -Math.PI / 2; ground.position.y = -0.5; ground.receiveShadow = true; scene.add(ground); // Build the airplane model airplane = createAirplane(); scene.add(airplane); // Position airplane so we start outside it, then can walk in airplane.position.set(0, 0, -10); airplane.rotation.y = Math.PI / 4; // Slight rotation for visual interest // Controls (PointerLock for first-person) controls = new THREE.PointerLockControls(camera, document.body); document.addEventListener('click', () => controls.lock()); controls.addEventListener('lock', () => console.log('Locked')); controls.addEventListener('unlock', () => console.log('Unlocked')); // Movement listeners document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Resize window.addEventListener('resize', onResize); } function createAirplane() { const group = new THREE.Group(); // Materials const bodyMat = new THREE.MeshStandardMaterial({ color: 0xCCCCCC, metalness: 0.3, roughness: 0.4 }); const windowMat = new THREE.MeshStandardMaterial({ color: 0x87CEEB, transparent: true, opacity: 0.8 }); const wingMat = new THREE.MeshStandardMaterial({ color: 0x888888, metalness: 0.2 }); const accentMat = new THREE.MeshStandardMaterial({ color: 0xFF6600 }); // Fuselage (main body) - a stretched cylinder const fuselageGeo = new THREE.CylinderGeometry(1.2, 1.2, 8, 16); const fuselage = new THREE.Mesh(fuselageGeo, bodyMat); fuselage.rotation.x = Math.PI / 2; // Align along Z axis fuselage.position.z = 0; group.add(fuselage); // Nose cone (front) const noseGeo = new THREE.ConeGeometry(1.2, 2, 16); const nose = new THREE.Mesh(noseGeo, bodyMat); nose.rotation.x = -Math.PI / 2; nose.position.z = -5; // Front group.add(nose); // Tail cone (back) const tailGeo = new THREE.ConeGeometry(1.0, 2, 16); const tail = new THREE.Mesh(tailGeo, bodyMat); tail.rotation.x = Math.PI / 2; tail.position.z = 5; group.add(tail); // Cockpit windows (front section) const windowGeo = new THREE.SphereGeometry(1.0, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2); const windowMesh = new THREE.Mesh(windowGeo, windowMat); windowMesh.position.z = -3.5; windowMesh.position.y = 0.3; windowMesh.scale.set(1, 0.6, 0.8); group.add(windowMesh); // Wings (main) const wingGeo = new THREE.BoxGeometry(10, 0.2, 2); const wing = new THREE.Mesh(wingGeo, wingMat); wing.position.set(0, 0.2, -1); group.add(wing); // Wing tips (colored) const tipGeo = new THREE.BoxGeometry(1, 0.2, 2); const tipLeft = new THREE.Mesh(tipGeo, accentMat); tipLeft.position.set(-5.5, 0.2, -1); group.add(tipLeft); const tipRight = new THREE.Mesh(tipGeo, accentMat); tipRight.position.set(5.5, 0.2, -1); group.add(tipRight); // Tail wings (horizontal stabilizers) const hStabGeo = new THREE.BoxGeometry(4, 0.15, 1); const hStab = new THREE.Mesh(hStabGeo, wingMat); hStab.position.set(0, 0.3, 4.5); group.add(hStab); // Vertical stabilizer (fin) const vStabGeo = new THREE.BoxGeometry(0.3, 1.5, 1.5); const vStab = new THREE.Mesh(vStabGeo, accentMat); vStab.position.set(0, 1.2, 4.8); group.add(vStab); // Engines (under wings) const engineGeo = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 8); const engineMat = new THREE.MeshStandardMaterial({ color: 0x333333 }); const engine1 = new THREE.Mesh(engineGeo, engineMat); engine1.rotation.x = Math.PI / 2; engine1.position.set(-3, -0.3, -1); group.add(engine1); const engine2 = new THREE.Mesh(engineGeo, engineMat); engine2.rotation.x = Math.PI / 2; engine2.position.set(3, -0.3, -1); group.add(engine2); // Interior details (for walking inside) // Floor (inside fuselage) const floorGeo = new THREE.PlaneGeometry(1.5, 6); const floorMat = new THREE.MeshStandardMaterial({ color: 0x555555, side: THREE.DoubleSide }); const floor = new THREE.Mesh(floorGeo, floorMat); floor.rotation.x = -Math.PI / 2; floor.position.set(0, -0.8, 0); group.add(floor); // Seats (simple boxes) const seatMat = new THREE.MeshStandardMaterial({ color: 0x3366CC }); for (let i = -2; i <= 2; i += 2) { const seatGeo = new THREE.BoxGeometry(0.8, 0.5, 0.8); const seat = new THREE.Mesh(seatGeo, seatMat); seat.position.set(0.5, -0.5, i); group.add(seat); const seat2 = new THREE.Mesh(seatGeo, seatMat); seat2.position.set(-0.5, -0.5, i); group.add(seat2); } // Ceiling lights (emissive) const lightMat = new THREE.MeshStandardMaterial({ color: 0xFFFFAA, emissive: 0xFFFFAA, emissiveIntensity: 0.5 }); for (let i = -2; i <= 2; i += 2) { const lightGeo = new THREE.SphereGeometry(0.1, 8, 8); const light = new THREE.Mesh(lightGeo, lightMat); light.position.set(0, 0.8, i); group.add(light); } // Enable shadows for all meshes group.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); return group; } function onKeyDown(event) { switch (event.code) { case 'KeyW': case 'ArrowUp': moveForward = true; break; case 'KeyS': case 'ArrowDown': moveBackward = true; break; case 'KeyA': case 'ArrowLeft': moveLeft = true; break; case 'KeyD': case 'ArrowRight': moveRight = true; break; } } function onKeyUp(event) { switch (event.code) { case 'KeyW': case 'ArrowUp': moveForward = false; break; case 'KeyS': case 'ArrowDown': moveBackward = false; break; case 'KeyA': case 'ArrowLeft': moveLeft = false; break; case 'KeyD': case 'ArrowRight': moveRight = false; break; } } function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); // Movement speed const speed = 10.0; const delta = clock.getDelta(); // Calculate movement direction relative to camera if (controls.isLocked) { velocity.x = 0; velocity.z = 0; if (moveForward) velocity.z = -speed * delta; if (moveBackward) velocity.z = speed * delta; if (moveLeft) velocity.x = -speed * delta; if (moveRight) velocity.x = speed * delta; // Apply movement if (velocity.z !== 0) { camera.translateZ(velocity.z); } if (velocity.x !== 0) { camera.translateX(velocity.x); } // Keep camera above floor (prevent falling through) if (camera.position.y < 0.5) camera.position.y = 0.5; } // Optional: rotate airplane slowly for visual interest (comment out for pure walk) // airplane.rotation.y += 0.001; renderer.render(scene, camera); } // PointerLockControls implementation (simplified for this example) // In a real project, import from 'three/examples/jsm/controls/PointerLockControls.js' // This is a minimal version for demonstration class PointerLockControls { constructor(camera, domElement) { this.camera = camera; this.domElement = domElement; this.isLocked = false; this.euler = new THREE.Euler(0, 0, 0, 'YXZ'); this.lock = () => { this.domElement.requestPointerLock(); }; this.unlock = () => { document.exitPointerLock(); }; this.onMouseMove = (event) => { if (this.isLocked) { const movementX = event.movementX || 0; const movementY = event.movementY || 0; this.euler.setFromQuaternion(this.camera.quaternion); this.euler.y -= movementX * 0.002; this.euler.x -= movementY * 0.002; this.euler.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.euler.x)); this.camera.quaternion.setFromEuler(this.euler); } }; this.onLockChange = () => { this.isLocked = document.pointerLockElement === this.domElement; }; document.addEventListener('mousemove', this.onMouseMove); document.addEventListener('pointerlockchange', this.onLockChange); } } // Note: For a real project, use the official PointerLockControls from Three.js examples. // This simplified version works for demonstration but may lack some features.