three实现三维航母搭建模型代码
代码语言：html
所属分类：三维
代码描述：three实现三维航母搭建模型代码，由ai自动建模，有舰载机与直升飞机，有巡逻起飞动画。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CVN-78 航空母舰 · Three.js 海上航行模拟</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0a1018;font-family:system-ui,"Microsoft YaHei",sans-serif}
canvas{display:block}
#panel{position:fixed;left:16px;top:16px;z-index:10;min-width:250px;max-width:300px;
background:rgba(8,14,22,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(120,170,255,.18);border-radius:14px;padding:14px 16px;color:#dfe8f2;font-size:13px}
#panel h1{font-size:15px;margin:0 0 4px;color:#fff;letter-spacing:.5px}
#panel .sub{color:#8fa8c4;font-size:11px;margin-bottom:10px}
.row{margin:8px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
button{cursor:pointer;border:1px solid rgba(120,170,255,.3);background:rgba(40,70,110,.35);
color:#cfe2ff;border-radius:8px;padding:5px 10px;font-size:12px;transition:.2s}
button:hover{background:rgba(70,120,180,.5)}
button.on{background:#2f7fd6;border-color:#6db2ff;color:#fff}
input[type=range]{width:100%;accent-color:#4da3ff}
input[type=checkbox]{accent-color:#4da3ff}
.lab{display:flex;justify-content:space-between;color:#9fb6d2;font-size:12px}
.lab b{color:#eaf3ff;font-weight:600}
#tip{margin-top:8px;color:#6d84a0;font-size:11px;border-top:1px solid rgba(120,170,255,.15);padding-top:8px}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
background:#0a1018;color:#9fc4ff;z-index:99;font-size:15px;letter-spacing:2px;transition:opacity .6s}
</style>
</head>
<body>
<div id="loading">正在生成海洋与航母 …</div>
<div id="panel">
<h1>CVN-78 航空母舰 · 海上航行</h1>
<div class="sub">Three.js 程序化三维模拟 · 舰长 333 m · 排水量 10 万吨</div>
<div class="row" id="views">
<button data-v="overview" class="on">全景</button>
<button data-v="stern">舰尾航迹</button>
<button data-v="island">舰岛</button>
<button data-v="bow">舰首</button>
<button data-v="top">俯瞰</button>
</div>
<div class="row"><label style="display:flex;gap:6px;align-items:center"><input type="checkbox" id="orbitChk" checked> 自动环绕</label></div>
<div class="row" style="display:block">
<div class="lab"><span>海况（浪高）</span><b id="seaV">1.00</b></div>
<input id="sea" type="range" min="0.3" max="1.8" step="0.01" value="1">
</div>
<div class="row" style="display:block">
<div class="lab"><span>航速</span><b id="spdV">11.7 节</b></div>
<input id="spd" type="range" min="0" max="10" step="0.1" value="6">
</div>
<div class="row" style="display:block">
<div class="lab"><span>时刻</span><b id="hourV">14:30</b></div>
<input id="hour" type="range" min="6" max="18" step="0.05" value="14.5">
</div>
<div id="tip">鼠标左键旋转 · 滚轮缩放 · 右键平移<br>舰载机将自动弹射起飞并绕舰盘旋</div>
</div>
<script type="importmap">
{ "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
}}
</script>
<script type="module">
import * as THREE from .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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