This model didn't return a displayable web page for this challenge.
View raw output
```html
<!DOCTYPE html>
<html>
<head>
<title>Autonomous Drone Simulator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
width: 90%;
margin: 20px auto;
text-align: center;
}
#environment {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#controls {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
#status {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Autonomous Drone Simulator</h1>
<div id="environment"></div>
<div id="controls">
<label for="speed">Speed:</label>
<input type="number" id="speed" value="5" min="1" max="100">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
<div id="status">
<!-- Display drone status here (e.g., "Flying", "Error") -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/examples/js/controls/FirstPersonControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const environmentDiv = document.getElementById('environment');
const speedInput = document.getElementById('speed');
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const resetButton = document.getElementById('reset');
const statusDiv = document.getElementById('status');
let scene;
let drone;
let camera;
let controls;
let speed = 5;
let isRunning = false;
let lastTime = 0;
// --- Environment (Customizable) ---
const environmentData = {
width: 800,
height: 600,
groundColor: '#333',
skyColor: '#87CEEB',
objects: [
{ x: 100, y: 50, z: 0, type: 'cube', color: '#FF0000', size: 20 },
{ x: 300, y: 150, z: 0, type: 'sphere', color: '#00FF00', radius: 30 },
{ x: 500, y: 300, z: 0, type: 'cylinder', color: '#0000FF', height: 50, radius: 10 }
]
};
// --- Drone Class ---
class Drone {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.rotation = { x: 0, y: 0, z: 0 };
}
update(deltaTime) {
// Simple movement based on speed
this.x += Math.cos(this.rotation.x * 0.1) * speed * deltaTime;
this.y += Math.sin(this.rotation.y * 0.1) * speed * deltaTime;
this.z += speed * deltaTime;
// Keep drone within environment
this.x = Math.max(0, Math.min(this.x, environmentData.width));
this.y = Math.max(0, Math.min(this.y, environmentData.height));
this.z = Math.max(0, Math.min(this.z, environmentData.height * 2)); // Adjust z-axis limit
}
draw() {
// You can add more advanced drawing here (e.g., using a 3D model)
// For now, just a simple cube
const material = new THREE.MeshStandardMaterial({ color: 'purple' });
const geometry = new THREE.BoxGeometry(20, 20, 20);
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(this.x, this.y, this.z);
scene.add(mesh);
}
}
// --- Initialize Three.js Scene ---
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(environmentData.skyColor);
const ground = new THREE.PlaneGeometry(environmentData.width * 1.2, environmentData.height * 1.2);
const groundMaterial = new THREE.MeshStandardMaterial({ color: environmentData.groundColor, roughness: 0.5 });
const groundMesh = new THREE.Mesh(ground, groundMaterial);
scene.add(groundMesh);
drone = new Drone(environmentData.width / 2, environmentData.height / 2, environmentData.height * 1.5);
drone.draw();
camera = new THREE.PerspectiveCamera(75, environmentData.width / environmentData.height, 0.1, 1000);
camera.position.set(0, environmentData.height / 2 + 50, 5);
scene.add(camera);
controls = new FirstPersonControls(camera, scene, {
speed: speed,
acceleration: 1,
maxSpeed: 100
});
// Add some objects to the environment
for (const obj of environmentData.objects) {
const geometry = new THREE.Shape( {
segments: obj.size,
bevelDepth: 0
});
const material = new THREE.MeshStandardMaterial({ color: obj.color });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
//--- Add a keypress event to the drone to control the camera ---
document.addEventListener('keydown', (event) => {
if (event.key === 'w') {
camera.position.z += 1;
} else if (event.key === 's') {
camera.position.z -= 1;
}
});
}
// --- Update Function ---
function update(time) {
if (!isRunning) return;
// Update drone position
drone.update(time / 1000);
// Update camera position based on drone movement
camera.position.x = drone.x;
camera.position.y = drone.y;
camera.position.z = drone.z;
// Apply camera movement to the environment
for (const obj of environmentData.objects) {
const geometry = new THREE.Shape( {
segments: obj.size,
bevelDepth: 0
});
const material = new THREE.MeshStandardMaterial({ color: obj.color });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(drone.x, drone.y, drone.z);
scene.add(mesh);
}
// Render
renderer.render(scene, camera);
}
// --- Event Handlers ---
startButton.addEventListener('click', () => {
if (!isRunning) {
isRunning = true;
startTime = Date.now();
console.log('Drone started');
}
});
stopButton.addEventListener('click', () => {
