4 models have responded to the "Autonomous Drone Simulator" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Autonomous Drone Simulator
Create an autonomous drone simulator with custom environment using ThreeJS
Kimi K2
August 3, 2025
Website
?Prompt
Create an autonomous drone simulator (drone flies by itself, isometric god like view, optionally interactive. With a custom environment (optionally creative), using ThreeJS, output a single-page self-contained HTML.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autonomous Drone Simulator</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
body {
margin: 0;
overflow: hidden;
font-family: 'Orbitron', monospace;
background: #000;
}
#info {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 40, 80, 0.8));
padding: 15px;
border-radius: 10px;
z-index: 100;
border: 1px solid rgba(0, 150, 255, 0.3);
box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
backdrop-filter: blur(10px);
}
#controls {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 40, 80, 0.8));
padding: 15px;
border-radius: 10px;
z-index: 100;
border: 1px solid rgba(0, 150, 255, 0.3);
box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
backdrop-filter: blur(10px);
}
button {
margin: 5px;
padding: 8px 15px;
background: linear-gradient(135deg, #0066cc, #0088ff);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Orbitron', monospace;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 136, 255, 0.3);
}
button:hover {
background: linear-gradient(135deg, #0088ff, #00aaff);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 170, 255, 0.5);
}
button:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(0, 136, 255, 0.3);
}
#stats {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 40, 80, 0.8));
padding: 15px;
border-radius: 10px;
z-index: 100;
border: 1px solid rgba(0, 150, 255, 0.3);
box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
backdrop-filter: blur(10px);
font-size: 12px;
min-width: 200px;
}
.stat-row {
display: flex;
justify-content: space-between;
margin: 5px 0;
padding: 2px 0;
border-bottom: 1px solid rgba(0, 150, 255, 0.2);
}
.stat-value {
color: #00ff88;
font-weight: bold;
}
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #00ff88;
font-size: 24px;
z-index: 1000;
text-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
<div id="loading" class="pulse">INITIALIZING AUTONOMOUS DRONE...</div>
</head>
<body>
<div id="info">
<h3 style="margin: 0 0 10px 0; color: #00ff88; text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);">AUTONOMOUS DRONE SIMULATOR</h3>
<p style="margin: 5px 0; font-size: 12px;">Drone is flying autonomously through the obstacle field</p>
<p style="margin: 5px 0; font-size: 12px;">Status: <span id="status" style="color: #00ff88;">ACTIVE</span></p>
</div>
<div id="controls">
<button id="toggleView">Toggle Camera</button>
<button id="togglePause">Pause/Resume</button>
<button id="resetDrone">Reset Drone</button>
<button id="addObstacle">Add Obstacle</button>
</div>
<div id="stats">
<h4 style="margin: 0 0 10px 0; color: #00ff88;">FLIGHT STATS</h4>
<div class="stat-row">
<span>Altitude:</span>
<span class="stat-value" id="altitude">0m</span>
</div>
<div class="stat-row">
<span>Speed:</span>
<span class="stat-value" id="speed">0 km/h</span>
</div>
<div class="stat-row">
<span>Battery:</span>
<span class="stat-value" id="battery">100%</span>
</div>
<div class="stat-row">
<span>Distance:</span>
<span class="stat-value" id="distance">0m</span>
</div>
<div class="stat-row">
<span>Waypoints:</span>
<span class="stat-value" id="waypoints">0/0</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script>
// Hide loading screen after a delay
setTimeout(() => {
document.getElementById('loading').style.display = 'none';
}, 2000);
// Initialize Three.js scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001122);
scene.fog = new THREE.FogExp2(0x001122, 0.001);
// Add stars to the background
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5 });
const starsVertices = [];
for (let i = 0; i < 10000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = (Math.random() - 0.5) * 2000;
starsVertices.push(x, y, z);
}
starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);
// Add ambient light
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);
// Add directional light (sun)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(100, 100, 50);
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.left = -100;
directionalLight.shadow.camera.right = 100;
directionalLight.shadow.camera.top = 100;
directionalLight.shadow.camera.bottom = -100;
scene.add(directionalLight);
// Add hemisphere light for better ambient lighting
const hemisphereLight = new THREE.HemisphereLight(0x0088ff, 0x002244, 0.5);
scene.add(hemisphereLight);
// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(30, 30, 30);
camera.lookAt(0, 0, 0);
// Renderer setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// Add orbit controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// Create ground plane with custom texture
const groundGeometry = new THREE.PlaneGeometry(100, 100, 50, 50);
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0x002244,
metalness: 0.3,
roughness: 0.7,
wireframe: false
});
// Add displacement to ground vertices for terrain effect
const groundVertices = groundGeometry.attributes.position.array;
for (let i = 0; i < groundVertices.length; i += 3) {
groundVertices[i + 2] = Math.sin(groundVertices[i] * 0.1) * Math.cos(groundVertices[i + 1] * 0.1) * 2;
}
groundGeometry.computeVertexNormals();
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);
// Add animated grid
const gridHelper = new THREE.GridHelper(100, 20, 0x0088ff, 0x004466);
gridHelper.material.opacity = 0.5;
gridHelper.material.transparent = true;
scene.add(gridHelper);
// Create drone body with metallic material
const droneGroup = new THREE.Group();
const droneBodyGeometry = new THREE.BoxGeometry(2, 0.5, 2);
const droneBodyMaterial = new THREE.MeshStandardMaterial({
color: 0x0066cc,
metalness: 0.8,
roughness: 0.2,
emissive: 0x003366,
emissiveIntensity: 0.2
});
const droneBody = new THREE.Mesh(droneBodyGeometry, droneBodyMaterial);
droneBody.castShadow = true;
droneBody.receiveShadow = true;
droneGroup.add(droneBody);
// Add LED lights to drone
const ledGeometry = new THREE.SphereGeometry(0.1, 8, 8);
const ledMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const leds = [];
for (let i = 0; i < 4; i++) {
const led = new THREE.Mesh(ledGeometry, ledMaterial);
const angle = (i / 4) * Math.PI * 2;
led.position.set(Math.cos(angle) * 1.2, 0.3, Math.sin(angle) * 1.2);
droneGroup.add(led);
leds.push(led);
}
// Create drone propellers with metallic finish
const propellerGeometry = new THREE.BoxGeometry(0.1, 0.1, 1.5);
const propellerMaterial = new THREE.MeshStandardMaterial({
color: 0xcccccc,
metalness: 0.9,
roughness: 0.1
});
const propellers = [];
const propellerPositions = [
{ x: -1, y: 0.2, z: -1 },
{ x: 1, y: 0.2, z: -1 },
{ x: 1, y: 0.2, z: 1 },
{ x: -1, y: 0.2, z: 1 }
];
for (let i = 0; i < 4; i++) {
const propeller = new THREE.Mesh(propellerGeometry, propellerMaterial);
propeller.position.set(
propellerPositions[i].x,
propellerPositions[i].y,
propellerPositions[i].z
);
propeller.castShadow = true;
droneGroup.add(propeller);
const propeller2 = new THREE.Mesh(propellerGeometry, propellerMaterial);
propeller2.position.set(
propellerPositions[i].x,
propellerPositions[i].y + 0.2,
propellerPositions[i].z
);
propeller2.rotation.y = Math.PI / 2;
propeller2.castShadow = true;
droneGroup.add(propeller2);
propellers.push(propeller, propeller2);
}
// Add drone to scene
scene.add(droneGroup);
// Create obstacles with variety
const obstacles = [];
const obstacleTypes = [
{ geometry: new THREE.BoxGeometry(5, 10, 5), material: new THREE.MeshStandardMaterial({ color: 0xff4444, metalness: 0.6, roughness: 0.4 }) },
{ geometry: new THREE.CylinderGeometry(3, 3, 12, 8), material: new THREE.MeshStandardMaterial({ color: 0x44ff44, metalness: 0.6, roughness: 0.4 }) },
{ geometry: new THREE.SphereGeometry(4, 16, 16), material: new THREE.MeshStandardMaterial({ color: 0x4444ff, metalness: 0.6, roughness: 0.4 }) },
{ geometry: new THREE.TorusGeometry(3, 1, 8, 16), material: new THREE.MeshStandardMaterial({ color: 0xffff44, metalness: 0.6, roughness: 0.4 }) }
];
for (let i = 0; i < 15; i++) {
const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
const obstacle = new THREE.Mesh(type.geometry, type.material);
obstacle.position.set(
Math.random() * 80 - 40,
5 + Math.random() * 10,
Math.random() * 80 - 40
);
if (Math.abs(obstacle.position.x) < 5 && Math.abs(obstacle.position.z) < 5) {
obstacle.position.x += 10;
obstacle.position.z += 10;
}
obstacle.castShadow = true;
obstacle.receiveShadow = true;
scene.add(obstacle);
obstacles.push(obstacle);
}
// Create waypoints with glow effect
const waypoints = [];
const waypointGeometry = new THREE.SphereGeometry(1, 16, 16);
const waypointMaterial = new THREE.MeshBasicMaterial({
color: 0x00ffff,
transparent: true,
opacity: 0.6
});
for (let i = 0; i < 8; i++) {
const waypoint = new THREE.Mesh(waypointGeometry, waypointMaterial);
waypoint.position.set(
Math.random() * 60 - 30,
5 + Math.random() * 15,
Math.random() * 60 - 30
);
scene.add(waypoint);
waypoints.push(waypoint);
// Add glow effect
const glowGeometry = new THREE.SphereGeometry(1.5, 16, 16);
const glowMaterial = new THREE.MeshBasicMaterial({
color: 0x00ffff,
transparent: true,
opacity: 0.2
});
const glow = new THREE.Mesh(glowGeometry, glowMaterial);
waypoint.add(glow);
}
// Add particle trail
const trailGeometry = new THREE.BufferGeometry();
const trailMaterial = new THREE.PointsMaterial({
color: 0x00ff88,
size: 0.2,
transparent: true,
opacity: 0.6
});
const trailPositions = [];
const trailMaxPoints = 50;
const trail = new THREE.Points(trailGeometry, trailMaterial);
scene.add(trail);
// Drone flight variables
let currentWaypointIndex = 0;
let droneSpeed = 0.05;
let propellerRotation = 0;
let isPaused = false;
let cameraFollow = false;
let totalDistance = 0;
let lastPosition = new THREE.Vector3();
let battery = 100;
let ledBlink = 0;
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
Autonomous Drone Simulator
About Kimi K2
Capabilities
ConversationReasoningCode GenerationAnalysis
Categories
TextCode
Specifications
- Provider
- Moonshotai
- Released
- 2025-07-11
- Size
- XLARGE
