three实现三维高山流水瀑布玻璃微缩场景代码-html代码-BFW代码库

three实现三维高山流水瀑布玻璃微缩场景代码

代码语言：html

所属分类：其他

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

代码描述：three实现三维高山流水瀑布玻璃微缩场景代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>玻璃立方 · 高山流水微缩景观</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#0b1017;font-family:"Microsoft YaHei",sans-serif;user-select:none}
  #c{display:block;width:100vw;height:100vh;cursor:grab}
  #c.drag{cursor:grabbing}
  #title{position:fixed;top:22px;left:26px;color:#dcecf7;z-index:10;pointer-events:none}
  #title h1{margin:0;font-size:24px;letter-spacing:5px;font-weight:600;text-shadow:0 0 18px rgba(120,190,255,.45)}
  #title p{margin:6px 0 0;font-size:12px;color:#8fa8bd;letter-spacing:2px}
  #hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#7d94a8;font-size:12px;letter-spacing:2px;z-index:10;pointer-events:none}
  #rotBtn{position:fixed;top:24px;right:26px;z-index:10;padding:8px 18px;font-size:13px;letter-spacing:2px;
    color:#cfe6f7;background:rgba(30,50,72,.6);border:1px solid rgba(140,190,230,.4);border-radius:20px;cursor:pointer}
  #rotBtn:hover{background:rgba(45,75,105,.7)}
  #rotBtn.off{color:#688093;border-color:rgba(100,130,160,.25)}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="title"><h1>玻璃立方 · 高山流水</h1><p>GLASS CUBE MINIATURE · 瀑布 / 溪涧 / 雪岭</p></div>
<button id="rotBtn">自动旋转：开</button>
<div id="hint">拖拽旋转 · 滚轮 / 双指缩放</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
'use strict';
const CUBE=8, HALF=CUBE/2, INNER=3.7;
const canvas=document.getElementById('c');
const renderer=new THREE.WebGLRenderer({canvas,antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.setSize(innerWidth,inn.........完整代码请登录后点击上方下载按钮下载查看