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: &l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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