代码语言：html

所属分类：其他

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

代码描述：三维农村小别墅场景

代码标签： three 三维 三层 别墅 场景 代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>云栖山房 · Cloudside Villa</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:#0b100d;font-family:"Noto Serif SC",serif;color:#e8e4d8}
  canvas{display:block}
  #vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,8,6,.42) 100%);z-index:3}
  #flash{position:fixed;inset:0;pointer-events:none;background:#dfe8ff;opacity:0;transition:opacity 1.3s ease-out;z-index:4}
  #cross{position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:rgba(240,236,224,.85);box-shadow:0 0 0 3px rgba(240,236,224,.18);z-index:5;display:none}
  #hint{position:fixed;left:50%;bottom:9vh;transform:translateX(-50%);padding:.55em 1.4em;border:1px solid rgba(232,228,216,.4);background:rgba(10,15,12,.62);backdrop-filter:blur(6px);letter-spacing:.22em;font-size:14px;z-index:5;opacity:0;transition:opacity .18s;white-space:nowrap}
  #hint b{color:#c9a86a;font-weight:600;margin-right:.7em}
  #hud{position:fixed;left:26px;top:26px;z-index:5;display:none}
  #hud .card{border:1px solid rgba(232,228,216,.28);background:rgba(10,15,12,.5);backdrop-filter:blur(8px);padding:14px 20px 12px;min-width:196px}
  #hud .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
  #hud .lab{font-size:10px;letter-spacing:.34em;color:rgba(232,228,216,.55)}
  #hud .val{font-size:14px;letter-spacing:.12em}
  #hud .time{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-size:34px;line-height:1.05;letter-spacing:.08em;color:#f2eee2}
  #hud hr{border:none;border-top:1px solid rgba(232,228,216,.18);margin:9px 0}
  #keys{position:fixed;right:26px;bottom:22px;z-index:5;display:none;font-size:11px;letter-spacing:.18em;color:rgba(232,228,216,.55);text-align:right;line-height:2}
  #keys b{color:rgba(232,228,216,.9);font-weight:600}
  .screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(7,12,9,.72)}
  .panel{text-align:center;max-width:640px;padding:40px 30px}
  .eyebrow{font-size:11px;letter-spacing:.55em;color:#c9a86a;margin-bottom:22px}
  h1.title{font-family:"Cormorant Garamond","Noto Serif SC",serif;font-weight:600;font-size:clamp(44px,7vw,74px);letter-spacing:.14em;line-height:1.1;color:#f2eee2}
  .sub{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:16px;letter-spacing:.3em;color:rgba(232,228,216,.6);margin-top:10px}
  .rule{width:64px;height:1px;background:#c9a86a;margin:30px auto}
  .keymap{display:grid;grid-template-columns:repeat(3,auto);gap:8px 34px;justify-content:center;font-size:12.5px;letter-spacing:.14em;color:rgba(232,228,216,.78);margin-bottom:34px;text-align:left}
  .keymap b{display:inline-block;min-width:52px;color:#c9a86a;font-weight:600;letter-spacing:.2em}
  .btn{display:inline-block;padding:13px 52px;border:1px solid #c9a86a;color:#e8e4d8;background:transparent;font-family:inherit;font-size:15px;letter-spacing:.42em;text-indent:.42em;cursor:pointer;transition:all .25s}
  .btn:hover{background:#c9a86a;color:#141a15}
  .foot{margin-top:26px;font-size:11px;letter-spacing:.24em;color:rgba(232,228,216,.4)}
  #menu{display:none}
  .hidden{display:none!important}
</style>
</head>
<body>
<div id="vig"></div><div id="flash"></div><div id="cross"></div>
<div id="hint"></div>
<div id="hud"><div class="card">
  <div class="time" id="hTime">07:12</div>
  <hr>
  <div class="row"><span class="lab">天气</span><span class="val" id="hWx">晴朗</span></div>
  <div class="row"><span class="lab">所在</span><span class="val" id="hArea">庭外小径</span></div>
  <div class="row"><span class="lab">时序</span><span class="val" id="hSpd">正常</span></div>
</div></div>
<div id="keys"><b>E</b> 开关门窗 · <b>L</b> 灯光 · <b>T</b> 天气 · <b>N</b> 时序 · <b>Shift</b> 疾行 · <b>空格</b> 跳跃 · <b>Esc</b> 菜单</div>

<div class="screen" id="intro"><div class="panel">
  <div class="eyebrow">三 层 现 代 宅 邸 · 自 由 漫 游</div>
  <h1 class="title">云栖山房</h1>
  <div class="sub">CLOUDSIDE VILLA</div>
  <div class="rule"></div>
  <div class="keymap">
    <span><b>W A S D</b> 移动</span><span><b>鼠标</b> 环视</span><span><b>E</b> 开关门窗</span>
    <span><b>Shift</b> 疾行</span><span><b>空格</b> 跳跃</span><span><b>L</b> 室内灯光</span>
    <span><b>T</b> 更换天气</span><span><b>N</b> 时间流速</span><span><b>Esc</b> 菜单</span>
  </div>
  <button class="btn" id="startBtn">步 入 庭 院</button>
  <div class="foot">天气随时流转 · 昼夜自行更迭 · 门扉窗扇皆可开合</div>
</div></div>

<div class="screen" id="menu"><div class="panel">
  <div class="eyebrow">云 栖 山 房</div>
  <h1 class="title" style="font-size:40px">稍 作 停 驻</h1>
  <div class="rule"></div>
  <button class="btn" id="resumeBtn" style="margin:0 10px 14px">继 续 漫 游</button><br>
  <button class="btn" id="resetBtn" style="margin:0 10px;border-color:rgba(232,228,216,.4)">回 到 门 前</button>
  <div class="foot" id="menuStat"></div>
</div></div>

<script type="importmap">
{"imports":{"three":"https://unpkg.com/three@0.165.0/build/three.module.js","three/addons/":"https://unpkg.com/three@0.165.0/examples/jsm/"}}
</script>
<script type="module">
import * as THREE from 'three';
import {RoundedBoxGeometry} from 'three/addons/geometries/RoundedBoxGeometry.js';
import {RoomEnvironment} from 'three/addons/environments/RoomEnvironment.js';

/* ========== 渲染基础 ========== */
const renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth,innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
renderer.toneMapping=THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure=1.05;
renderer.outputColorSpace=THREE.SRGBColorSpace;
document.body.appendChild(renderer.domElement);

const scene=new THREE.Scene();
scene.fog=new THREE.Fog(0xaebfc9,45,250);
const camera=new THREE.PerspectiveCamera(66,innerWidth/innerHeight,0.08,600);
const pmrem=new THREE.PMREMGenerator(renderer);
scen.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论