three+cannon+vanta实现三维体素生物进化模拟效果代码
代码语言：html
所属分类：三维
代码描述：three+cannon+vanta实现三维体素生物进化模拟效果代码
代码标签： three cannon vanta 三维 体素 生物 进化 模拟
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<style>
.voxel-container {
width: 100%;
height: 400px;
position: relative;
background: #1a202c;
border-radius: 12px;
overflow: hidden;
}
.gene-progress {
transition: width 0.5s ease-in-out;
}
.creature-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.creature-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
@keyframes pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
.pulsing {
animation: pulse 2s infinite;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #2d3748;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #718096;
}
#three-container {
width: 100%;
height: 100%;
}
.stats-badge {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
border-radius: 4px;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<!-- Background Effect -->
<div id="vanta-bg" class="fixed w-full h-full top-0 left-0 z-0"></div>
<div class="relative z-10 container mx-auto px-4 py-8">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Voxel Creatures Evolutionary Sim
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Watch voxel creatures evolve with physics-based movement, environmental interactions, and complex behaviors.
</p>
</header>
<!-- Main Simulation Area -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
<!-- Left Panel - Controls -->
<div class="bg-gray-800 bg-opacity-80 rounded-xl p-6 shadow-xl backdrop-blur-sm">
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2 flex items-center">
<i class="fas fa-sliders-h mr-2 text-teal-400"></i>
Simulation Controls
</h2>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium mb-1">Environment Type</label>
<select id="environment-type" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-teal-500">
<option value="plains">Plains (balanced)</option>
<option value="ocean">Ocean (swimming focus)</option>
<option value="mountains">Mountains (climbing/strength)</option>
<option value="desert">Desert (heat resistance)</option>
<option value="forest">Forest (camouflage)</option>
<option value="predators">Predators (speed/strength)</option>
</select>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Population Size</label>
<input type="range" id="population-size" min="5" max="30" value="12" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span>5</span>
<span>30</span>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Mutation Rate</label>
<input type="range" id="mutation-rate" min="1" max="10" value="4" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span>1%</span>
<span>10%</span>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium mb-1">Food Amount</label>
<input type="range" id="food-amount" min="1" max="10" value="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span>Sparse</span>
<span>Abundant</span>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Physics Accuracy</label>
<input type="range" id="physics-accuracy" min="1" max="5" value="3" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
<div class="flex justify-between text-xs text-gray-400 mt-1">
<span>Low</span>
<span>High</span>
</div>
</div>
</div>
<div class="flex space-x-3">
<button id="start-btn" class="flex-1 bg-teal-600 hover:bg-teal-500 text-white py-2 px-4 rounded-md font-medium transition flex items-center justify-center">
<i class="fas fa-play mr-2"></i> Start Evolution
</button>
<button id="pause-btn" class="flex-1 bg-gray-600 hover:bg-gray-500 text-white py-2 px-4 rounded-md font-medium transition flex items-center justify-center">
<i class="fas fa-pause mr-2"></i> Pause
</button>
<button id="reset-btn" class="flex-1 bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-md font-medium transition flex items-center justify-center">
<i class="fas fa-undo mr-2"></i> Reset
</button>
</div>
<div class="pt-4 border-t border-gray-700">
<h3 class="font-medium mb-2 flex items-center">
<i class="fas fa-info-circle mr-2 text-blue-400"></i>
Current Generation: <span id="generation-counter" class="ml-2 font-bold">0</span>
</h3>
<h3 class="font-medium mb-2 flex items-center">
<i class="fas fa-bolt mr-2 text-yellow-400"></i>
Top Fitness: <span id="fitness-score" class="ml-2 font-bold">0</span>
</h3>
<h3 class="font-medium mb-2 flex items-center">
<i class="fas fa-utensils mr-2 text-green-400"></i>
Food Available: <span id="food-count" class="ml-2 font-bold">0</span>
</h3>
</div>
</div>
</div>
<!-- Center Panel - 3D Viewer -->
<div class="lg:col-span-2 rounded-xl overflow-hidden shadow-xl">
<div class="voxel-container relative" id="three-container">
<div id="stats-overlay" class="absolute z-10 bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent hidden">
<div class="text-white text-sm grid grid-cols-2 gap-2">
<div>Speed: <span class="float-right" id="stat-speed">0</span></div>
<div>Strength: <span class="float-right" id="stat-strength">0</span></div>
<div>Size: <span class="float-right" id="stat-size">0</span></div>
<div>Health: <span class="float-right" id="stat-health">0</span></div>
<div>Energy: <span class="float-right" id="stat-energy">0</span></div>
<div>Age: <span class="float-right" id="stat-age">0</span></div>
</div>
</div>
<div id="loading-overlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70">
<div class="text-center">
<i class="fas fa-spinner fa-spin text-4xl mb-4 text-teal-400"></i>
<p class="text-xl">Loading physics engine...</p>
</div>
</div>
</div>
<div class="bg-gray-800 bg-opacity-80 p-4 border-t border-gray-700 backdrop-blur-sm">
<div class="flex justify-between items-center">
<div>
<h3 class="font-medium">Selected: <span id="selected-creature" class="font-semibold text-teal-300">None</span></h3>
<div class="flex space-x-2 mt-1">
<span id="creature-age" class="stats-badge text-xs px-2 py-1">Age: 0</span>
<span id="creature-fitness" class="stats-badge text-xs px-2 py-1">Fitness: 0</span>
<span id="creature-generation" class="stats-badge text-xs px-2 py-1">Gen: 0</span>
<span id="creature-species" class="stats-badge text-xs px-2 py-1">Species: New</span>
</div>
</div>
<div class="flex space-x-2">
<button id="breed-btn" class="bg-blue-600 hover:bg-blue-500 text-white py-1 px-3 rounded-md text-sm transition">
<i class="fas fa-dna mr-1"></i> Breed
</button>
<button id="mutate-btn" class="bg-purple-600 hover:bg-purple-500 text-white py-1 px-3 rounded-md text-sm transition">
<i class="fas fa-radiation mr-1"></i> Mutate
</button>
<button id="follow-btn" class="bg-green-600 hover:bg-green-500 text-white py-1 px-3 rounded-md text-sm transition">
<i class="fas fa-eye mr-1"></i> Follow
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Population Grid -->
<div class="bg-gray-800 bg-opacity-80 rounded-xl p-6 shadow-xl backdrop-blur-sm mb-8">
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2 flex items-center">
<i class="fas fa-users mr-2 text-blue-400"></i>
Population <span class="ml-auto text-sm font-normal">(Click to .........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0