代码语言：html

所属分类：其他

代码由deepseek-4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维中国龙遨游云海

代码标签： three 三维 中国 龙 遨游 云海 控制 飞行 代码

下面为部分代码预览，完整代码请点击下载或在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>中国龙 · 云海飞行</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{width:100%;height:100%;overflow:hidden;background:#0a1628;}
  canvas{display:block;}
  #hud{
    position:fixed;left:26px;bottom:24px;
    color:rgba(255,255,255,.88);
    font-family:"Songti SC","STSong","SimSun",serif;
    pointer-events:none;
    text-shadow:0 2px 16px rgba(0,0,0,.9);
    letter-spacing:3px;
  }
  #hud .title{font-size:22px;font-weight:600;margin-bottom:8px;}
  #hud .sub{font-size:12px;opacity:.6;letter-spacing:1.5px;}
</style>
</head>
<body>
<div id="hud">
  <div class="title">中国龙 · 云海飞行</div>
  <div class="sub">移动鼠标调整视角 · 滚轮缩放</div>
</div>

<script type="importmap">
{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js" } }
</script>

<script type="module">
import * as THREE from 'three';

/* ==========================================================
   基础渲染环境
   ========================================================== */
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.02;
renderer.outputColorSpace = THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xa9c8e6, 0.00013);

const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.5, 40000);
camera.position.set(0, 480, 200);

/* ==========================================================
   环境贴图（让金属鳞片有反射）
   ========================================================== */
function makeEnvTexture() {
  const c = document.createElement('canvas');
  c.width = 1024; c.height = 512;
  const ctx = c.getContext('2d');

  const g = ctx.createLinearGradient(0, 0, 0, 512);
  g.addColorStop(0.00, '#25528f');
  g.addColorStop(0.32, '#7cb0e4');
  g.addColorStop(0.50, '#e2eefb');
  g.addColorStop(0.56, '#c9d3c2');
  g.addColorStop(1.00, '#413b2e');
  ctx.fillStyle = g; ctx.fillRect(0, 0, 1024, 512);

  // 太阳
  const sx = 690, sy = 130;
  const sg = ctx.createRadialGradient(sx, sy, 0, sx, sy, 150);
  sg.addColorStop(0.0, 'rgba(255,255,246,1)');
  sg.addColorStop(0.18, 'rgba(255,246,205,0.75)');
  sg.addColorStop(1.0, 'rgba(255,.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论