three实现三维房间带音效不同天气场景昼夜切换代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维房间带音效不同天气场景昼夜切换代码

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cozy Isometric Room</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #1a1a2e; }
canvas { display: block; }
#ui {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
font-family: 'Segoe UI', sans-serif;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
}
.btn:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.btn.active {
background: rgba(255,183,77,0.4);
border-color: rgba(255,183,77,0.6);
}
#time-label {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-family: 'Segoe UI', sans-serif;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 10;
}
#tooltip {
position: fixed;
padding: 8px 16px;
background: rgba(0,0,0,0.7);
color: #fff;
font-family: 'Segoe UI', sans-serif;
font-size: 13px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 20;
backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<div id="time-label">Evening</div>
<div id="ui">
<button class="btn" onclick="setTime('morning')">🌅 Morning</button>
<button class="btn active" onclick="setTime('evening')">🌆 Evening</button>
<button class="btn" onclick="setTime('night')">🌙 Night</button>
<button class="btn" onclick="toggleRain()">🌧️ Rain</button>
<button class="btn" onclick="toggleMusic()">🎵 Lo-fi</button>
</div>
<div id="tooltip"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ─── SCENE SETUP ───
const scene = new THREE.Scene();
const aspect = window.innerWidth / window.innerHeight;
const frustumSize = 12;
const camera = new THREE.OrthographicCamera(
frustumSize * aspect / -2, frustumSize * aspect / 2,
frustumSize / 2, frustumSize / -2, 0.1, 100
);
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
document.body.appendChild(renderer.domElement);

// ─── TIME OF DAY SYSTEM ───
let currentTime = 'evening';
const timeConfigs = {
morning: {
bg: new THREE.Color(0x87CEEB),
ambient: new THREE.Color(0xfff5e6),
ambientIntensity: 0.6,
sunColor: new THREE.Color(0xffe4b5),
sunIntensity: 0.8,
sunPos: new THREE.Vector3(8, 12, 4),
lampIntensity: 0.1,
screenGlow: 0.3,
exposure: 1.2,
fogColor: new THREE.Color(0xc9dff2)
},
evening: {
bg: new THREE.Color(0x2d1b4e),
ambient: new THREE.Color(0x4a3a6b),
ambientIntensity: 0.25,
sunColor: new THREE.Color(0xff8c42),
sunIntensity: 0.3,
sunPos: new THREE.Vector3(-5, 6, 8),
lampIntensity: 0.9,
screenGlow: 0.7,
exposure: 0.9,
fogColor: new THREE.Color(0x1a1028)
},
night: {
bg: new THREE.Color(0x0a0a1a),
ambient: new THREE.Color(0x1a1a3e),
ambientIntensity: 0.1,
sunColor: new THREE.Color(0x4466aa),
sunIntensity: 0.05,
sunPos: new THREE.Vector3(-3, 8, -5),
lampIntensity: 1.2,
screenGlow: 1.0,
exposure: 0.7,
fogColor: new THREE.Color(0x050510)
}
};

// ─── LIGHTS ───
const ambientLight = new THREE.AmbientLight(0x4a3a6b, 0.25);
scene.add(ambientLight);

const sunLight = ne.........完整代码请登录后点击上方下载按钮下载查看