three实现三维可调参数植物生长动画代码
代码语言：html
所属分类：三维
代码描述：three实现三维可调参数植物生长动画代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 过程化植物生成模拟</title>
<style>
body { margin: 0; overflow: hidden; background-color: #8fb8d8; font-family: sans-serif; }
canvas { display: block; width: 100vw; height: 100vh; }
#ui {
position: absolute;
top: 15px;
left: 15px;
background: rgba(20, 30, 40, 0.85);
color: #eee;
padding: 15px 20px;
border-radius: 8px;
width: 280px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
backdrop-filter: blur(4px);
max-height: 90vh;
overflow-y: auto;
}
h2 { margin: 0 0 15px 0; font-size: 16px; border-bottom: 1px solid #444; padding-bottom: 8px; color: #fff;}
.control-group { margin-bottom: 12px; }
.control-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: #aaa;}
input[type="range"] { width: 100%; cursor: pointer; accent-color: #6fe7a9; }
.checkbox-group { display: flex; align-items: center; font-size: 13px; margin-top: 5px; cursor: pointer; }
.checkbox-group input { margin-right: 8px; cursor: pointer; accent-color: #6fe7a9; }
button {
width: 100%; padding: 8px; margin-top: 10px; border: none; border-radius: 4px;
background: #3e9c4f; color: white; cursor: pointer; font-weight: bold; transition: background 0.2s;
}
button:hover { background: #4ec6ff; }
</style>
</head>
<body>
<div id="ui">
<h2>植物控制面板</h2>
<div class="control-group">
<div class="control-header"><span>生长时间 (Age)</span><span id="valGrowth">0.00</span></div>
<input type="range" id="growth" min="0" max="1" step="0.001" value="0">
<label class="checkbox-group"><input type="checkbox" id="autoGrow" checked> 自动生长</label>
</div>
<div class="control-group">
<div class="control-header"><span>生长速度</span><span id="valSpeed">0.09</span></div>
<input type="range" id="speed" min="0.01" max="0.5" step="0.01" value="0.09">
</div>
<div class="control-group">
<div class="control-header"><span>风力强度</span><span id="valWind">0.50</span></div>
<input type="range" id="wind" min="0" max="2" step="0.01" value="0.5">
</div>
<div class="control-group">
<div class="control-header"><span>树枝分叉率</span><span id="valBranching">0.65</span></div>
<input type="range" id="branching" min="0" max="1" step="0.01" value="0.65">
</div>
<div class="control-group">
<div class="control-header"><span>树叶密度</span><span id="valDensity">0.75</span></div>
<input type="range" id="density" min="0" max="1" step="0.01" value="0.75">
</div>
<div class="control-group">
<div class="control-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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