three实现三维瀑布下的凉亭景色场景代码-html代码-BFW代码库

three实现三维瀑布下的凉亭景色场景代码

代码语言：html

所属分类：三维

代码描述：three实现三维瀑布下的凉亭景色场景代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>飞瀑听泉亭 · Three.js 三维场景</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#0b1420;}
  canvas{display:block;touch-action:none;}
  .ui{position:fixed;z-index:10;pointer-events:none;color:#fff;
      font-family:'Kaiti SC','STKaiti','KaiTi','Microsoft YaHei',serif;
      text-shadow:0 2px 10px rgba(0,0,0,.5);}
  #title{top:16px;left:50%;transform:translateX(-50%);text-align:center;}
  #title h1{margin:0;font-size:30px;letter-spacing:10px;font-weight:600;}
  #title p{margin:6px 0 0;font-size:12px;letter-spacing:4px;opacity:.85;}
  #hint{bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:2px;opacity:.7;}
  #snd{position:fixed;top:18px;right:18px;z-index:11;cursor:pointer;letter-spacing:2px;
       background:rgba(15,28,40,.45);border:1px solid rgba(255,255,255,.28);color:#fff;
       padding:8px 16px;border-radius:20px;font-size:14px;backdrop-filter:blur(6px);}
  #snd:hover{background:rgba(40,62,84,.65);}
  #vig{position:fixed;inset:0;pointer-events:none;z-index:5;
       background:radial-gradient(ellipse at center,transparent 60%,rgba(6,12,20,.42) 100%);}
  #err{display:none;position:fixed;top:46%;width:100%;text-align:center;z-index:99;
       color:#ffd7d7;font:15px/1.8 sans-serif;}
</style>
</head>
<body>
<div id="vig"></div>
<div class="ui" id="title"><h1>飞瀑 · 听泉亭</h1><p>THREE.JS 三维瀑布园林小景</p></div>
<div class="ui" id="hint">拖动旋转 · 滚轮 / 双指缩放 · 静观飞瀑流泉</div>
<button id="snd">🔇 开启水声</button>
<div id="err">CDN 资源加载失败，请检查网络后刷新页面重试。</div>
<script>
  setTimeout(function(){ if(!window.__booted) document.getElementById('err').style.display='block'; }, 9000);
</script>

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';

/* ============ 基础工具 ============ */
function makeTex(size, draw, repeat){
  const c = document.createElement('canvas'); c.width = c.height = size;
  draw(c.getContext('2d'), size);
  const t = new THREE.CanvasTexture(c);
  t.colorSpace = THREE.SRGBColorSpace;
  if(repeat){ t.wrapS = t.wrapT = THREE.RepeatWrapping; t.repeat.set(repeat[0], repeat[1]); }
  t.anisotropy = 4;
  return t;
}
const rnd = (a,b)=>a+Math.random()*(b-a);

/* ============ 程序化贴图 ============ */
const grassTex = makeTex(256,(g,s)=>{
  g.fillStyle='#4d7c3f'; g.fillRect(0,0,s,s);
  for(let i=0;i<5200;i++){
    const c = 55+Math.random()*55;
    g.fillStyle=`rgba(${c*0.55|0},${c+45|0},${c*0.45|0},0.55)`;
    g.fillRect(Math.random()*s, Math.random()*s, 2, 2+Math.random()*3);
  }
},[16,16]);

const cliffTex = makeTex(256,(g,s)=>{
  g.fillStyle='#5d564c'; g.fillRect(0,0,s,s);
  for(let i=0;i<2600;i++){
    const v = 40+Math.random()*70;
    g.fillStyle=`rgba(${v},${v*0.95|0},${v*0.85|0},0.35)`;
    g.fillRect(Math.random()*s, Math.random()*s, 2+Math.random()*4, 2+Math.random.........完整代码请登录后点击上方下载按钮下载查看