three实现三维cozy room房子昼夜切换展示代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维cozy room房子昼夜切换展示代码

下面为部分代码预览，完整代码请点击下载或在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; font-family: 'Georgia', serif; }
canvas { display: block; }
#ui {
position: fixed;
top: 20px;
left: 20px;
z-index: 10;
color: #e8d5b7;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
#ui h1 {
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 8px;
}
#ui p {
font-size: 13px;
opacity: 0.7;
font-style: italic;
}
#time-toggle {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 10;
display: flex;
gap: 10px;
}
.btn {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
color: #e8d5b7;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-family: 'Georgia', serif;
font-size: 13px;
transition: all 0.3s ease;
}
.btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.btn.active { background: rgba(232,213,183,0.3); border-color: #e8d5b7; }
#music-note {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 10;
font-size: 20px;
cursor: pointer;
color: #e8d5b7;
opacity: 0.6;
transition: opacity 0.3s;
}
#music-note:hover { opacity: 1; }
</style>
</head>
<body>
<div id="ui">
<h1>✦ Cozy Room</h1>
<p>A quiet place to rest</p>
</div>
<div id="time-toggle">
<button class="btn active" onclick="setTimeOfDay('night')">🌙 Night</button>
<button class="btn" onclick="setTimeOfDay('sunset')">🌅 Sunset</button>
<button class="btn" onclick="setTimeOfDay('day')">☀️ Day</button>
</div>
<div id="music-note" onclick="toggleMusic()">🔇</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
);

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);

// Isometric camera
camera.position.set(10, 10, 10);
camera.lookAt(0, 0, 0);

// ============== TIME OF DAY SYSTEM ==============
let currentTime = 'night';
const timeSettings = {
night: {
bg: new THREE.Color(0x0a0a1a),
ambient: 0x1a1a3a,
ambientIntensity: 0.15,
exposure: 0.8,
fogColor: 0x0a0a1a,
windowLight: 0x2233aa,
windowIntensity: 0.3
},
sunset: {
bg: new THREE.Color(0x2a1520),
ambient: 0x3a2020,
ambientIntensity: 0.3,
exposure: 1.1,
fogColor: 0x2a1520,
windowLight: 0xff6633,
windowIntensity: 0.8
},
day: {
bg: new THREE.Color(0xc4d4e0),
ambient: 0x8899aa,
ambientIntensity: 0.6,
exposure: 1.4,
fogColor: 0xc4d4e0,
windowLight: 0xffeedd,
windowIntensity: 1.2
}
};

// ============== LIGHTS ==============
const ambientLight = new THREE.AmbientLight(0x1a1a3a, 0.15);
scene.add(ambientLight);

// Warm lamp light
const lampLight = new THREE.SpotLight(0xffffff, 3.5, 32, Math.PI / 4, 1.3, 2);
lampLight.position.set(-1.5, 3.5, -1.5);  // 光源位置（灯罩内）
lampLight.target.position.set(-1.5, 0, -1.5);  // 🎯 照射目标：正下方地面
lampLight.castShadow = true;
lampLight.shadow.mapSize.width = 1024;
lampLight.shadow.mapSize.height = 1024;
lampLight.shadow.radius = 4;
sc.........完整代码请登录后点击上方下载按钮下载查看