इंटरैक्टिव 3D वॉक्सेल चेरी ब्लॉसम वैली वेब सीन

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <title>日式樱花山谷 · 蓝调时刻</title> <style> body { margin: 0; overflow: hidden; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; background-color: #0d1b2a; color: #e0e0e0; } #info { position: absolute; top: 16px; left: 16px; background: rgba(10, 20, 30, 0.6); backdrop-filter: blur(6px); padding: 8px 16px; border-radius: 30px; font-size: 14px; letter-spacing: 1px; border: 1px solid rgba(255, 200, 200, 0.2); pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } #controls { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 12px; z-index: 20; pointer-events: none; } .btn-group { display: flex; gap: 8px; background: rgba(20, 30, 40, 0.7); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 40px; border: 1px solid rgba(255, 180, 180, 0.2); pointer-events: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .btn { background: transparent; border: none; color: #ddd; padding: 6px 14px; border-radius: 30px; font-size: 13px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; } .btn:hover { background: rgba(255, 120, 120, 0.2); color: #fff; } .btn.active { background: #b34a4a; color: white; box-shadow: 0 0 10px rgba(255, 100, 100, 0.3); } #status { position: absolute; bottom: 20px; right: 20px; font-size: 12px; color: #aaa; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); z-index: 15; pointer-events: none; } #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ccc; font-size: 18px; background: rgba(0,0,0,0.6); padding: 12px 24px; border-radius: 40px; z-index: 100; letter-spacing: 2px; border: 1px solid rgba(255,200,200,0.2); backdrop-filter: blur(4px); } @media (max-width: 600px) { #info { font-size: 12px; top: 10px; left: 10px; padding: 4px 12px; } .btn { padding: 4px 10px; font-size: 12px; } .btn-group { padding: 6px 8px; gap: 4px; } #status { display: none; } } </style> </head> <body> <div id="info">🌸 樱花山谷 · 蓝调时刻</div> <div id="loading">加载中…</div> <div id="controls"> <div class="btn-group"> <button class="btn active" data-camera="overview">全景</button> <button class="btn" data-camera="river">河边</button> <button class="btn" data-camera="temple">小径</button> <button class="btn" data-camera="hill">山坡</button> </div> <div class="btn-group"> <button class="btn" data-atmosphere="dusk">蓝调</button> <button class="btn" data-atmosphere="morning">清晨</button> <button class="btn" data-atmosphere="rain">雨中</button> </div> <div class="btn-group"> <button class="btn" id="resetView">重置视角</button> <button class="btn" id="toggleUI">隐藏界面</button> <button class="btn" id="saveImage">保存画面</button> </div> </div> <div id="status">WebGL · 高画质</div> <!-- 引入 Three.js 核心库和扩展 --> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.128.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.128.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { FXAAShader } from 'three/addons/shaders/FXAAShader.js'; // --- 初始化场景、相机、渲染器 --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0a1a2a); scene.fog = new THREE.FogExp2(0x0a1a2a, 0.008); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(20, 12, 25); camera.lookAt(0, 2, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); 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.2; document.body.appendChild(renderer.domElement); // 后期效果 const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.6, 0.2, 0.1); bloomPass.threshold = 0.7; bloomPass.strength = 0.5; bloomPass.radius = 0.2; composer.addPass(bloomPass); // FXAA 抗锯齿 const fxaaPass = new ShaderPass(FXAAShader); fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight); composer.addPass(fxaaPass); // 控制器 const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.maxPolarAngle = Math.PI / 2.2; controls.minDistance = 5; controls.maxDistance = 60; controls.target.set(0, 3, 0); // --- 灯光 --- // 环境光 const ambientLight = new THREE.AmbientLight(0x404060, 0.6); scene.add(ambientLight); // 主光源 (模拟月光/蓝调) const mainLight = new THREE.DirectionalLight(0xbfcfff, 1.0); mainLight.position.set(-10, 20, 10); mainLight.castShadow = true; mainLight.shadow.mapSize.width = 1024; mainLight.shadow.mapSize.height = 1024; mainLight.shadow.camera.near = 0.5; mainLight.shadow.camera.far = 50; mainLight.shadow.camera.left = -15; mainLight.shadow.camera.right = 15; mainLight.shadow.camera.top = 15; mainLight.shadow.camera.bottom = -15; scene.add(mainLight); // 暖色补光 (灯笼区域) const fillLight = new THREE.PointLight(0xffaa66, 0.8, 20); fillLight.position.set(3, 2, 2); scene.add(fillLight); // 辅助光 const backLight = new THREE.DirectionalLight(0x6688aa, 0.3); backLight.position.set(5, 5, -10); scene.add(backLight); // --- 地面与地形 (程序化起伏) --- const groundGeo = new THREE.PlaneGeometry(60, 60, 64, 64); groundGeo.rotateX(-Math.PI / 2); const pos = groundGeo.attributes.position; for (let i = 0; i < pos.count; i++) { const x = pos.getX(i); const z = pos.getZ(i); // 山谷起伏 let y = 0; y += Math.sin(x * 0.3) * Math.cos(z * 0.2) * 1.5; y += Math.sin(x * 0.8) * 0.8; y += Math.cos(z * 0.5) * 0.8; // 河流区域凹陷 const riverDist = Math.abs(z - 2 * Math.sin(x * 0.2) - 1); if (riverDist < 2.0) { y -= (2.0 - riverDist) * 0.8; } // 山坡抬升 if (x > 8) y += (x - 8) * 0.3; if (x < -10) y += (-10 - x) * 0.2; pos.setY(i, y); } groundGeo.computeVertexNormals(); const groundMat = new THREE.MeshStandardMaterial({ color: 0x2a3a2a, roughness: 0.9, metalness: 0.1 }); const ground = new THREE.Mesh(groundGeo, groundMat); ground.receiveShadow = true; scene.add(ground); // --- 河流 (半透明反射面) --- const riverGeo = new THREE.PlaneGeometry(4, 30); riverGeo.rotateX(-Math.PI / 2); const riverMat = new THREE.MeshStandardMaterial({ color: 0x3a5a7a, transparent: true, opacity: 0.7, roughness: 0.2, metalness: 0.4, emissive: 0x112233 }); const river = new THREE.Mesh(riverGeo, riverMat); river.position.set(0, 0.1, 0); river.rotation.y = 0.2; river.receiveShadow = true; scene.add(river); // 河岸石块 const rockMat = new THREE.MeshStandardMaterial({ color: 0x556655, roughness: 0.8 }); for (let i = 0; i < 30; i++) { const rock = new THREE.Mesh(new THREE.DodecahedronGeometry(0.2 + Math.random() * 0.4), rockMat); const angle = Math.random() * Math.PI * 2; const dist = 2 + Math.random() * 3; rock.position.set(Math.cos(angle) * dist, 0.2, Math.sin(angle) * dist * 0.8); rock.scale.set(1, 0.5 + Math.random() * 0.5, 1); rock.castShadow = true; rock.receiveShadow = true; scene.add(rock); } // --- 樱花树 (程序化体素风格) --- function createSakuraTree(x, z, scale = 1.0) { const group = new THREE.Group(); const trunkMat = new THREE.MeshStandardMaterial({ color: 0x5a3a2a, roughness: 0.9 }); const leafMat = new THREE.MeshStandardMaterial({ color: 0xffb7c5, emissive: 0x331122, roughness: 0.6 }); // 树干 (多个立方体堆叠) const trunkHeight = 2.2 * scale; const segments = 5; for (let i = 0; i < segments; i++) { const box = new THREE.Mesh(new THREE.BoxGeometry(0.5 * scale, 0.6 * scale, 0.5 * scale), trunkMat); box.position.y = i * 0.5 * scale + 0.3 * scale; box.castShadow = true; box.receiveShadow = true; group.add(box); } // 分支 const branchPos = [[0.5, 1.8, 0.3], [-0.4, 2.0, -0.5], [0.3, 2.4, 0.6], [-0.2, 2.6, -0.2]]; branchPos.forEach((p) => { const branch = new THREE.Mesh(new THREE.BoxGeometry(0.3 * scale, 0.3 * scale, 0.3 * scale), trunkMat); branch.position.set(p[0] * scale, p[1] * scale, p[2] * scale); branch.castShadow = true; group.add(branch); }); // 树冠 (多个不规则方块) const clusterPos = [ [0.8, 2.8, 0.5], [-0.5, 3.0, 0.8], [0.3, 3.2, -0.6], [1.0, 2.5, -0.3], [-0.8, 2.7, -0.2], [0.0, 3.5, 0.2], [0.6, 3.0, 1.0], [-0.3, 3.1, -1.0] ]; clusterPos.forEach((p) => { const leaf = new THREE.Mesh(new THREE.BoxGeometry(0.8 * scale, 0.8 * scale, 0.8 * scale), leafMat); leaf.position.set(p[0] * scale, p[1] * scale, p[2] * scale); leaf.castShadow = true; leaf.receiveShadow = true; group.add(leaf); }); group.position.set(x, 0.2, z); return group; } // 放置樱花树 (前景大树 + 远处几棵) const mainTree = createSakuraTree(-6, -4, 1.6); scene.add(mainTree); const tree2 = createSakuraTree(8, 5, 0.8); scene.add(tree2); const tree3 = createSakuraTree(-8, 7, 0.9); scene.add(tree3); const tree4 = createSakuraTree(5, -7, 0.7); scene.add(tree4); // --- 建筑 (茶屋/神社/塔) --- function createBuilding(x, z, type = 'house') { const group = new THREE.Group(); const wallMat = new THREE.MeshStandardMaterial({ color: 0x8a6a4a, roughness: 0.8 }); const roofMat = new THREE.MeshStandardMaterial({ color: 0x6a3a2a, roughness: 0.7 }); const woodMat = new THREE.MeshStandardMaterial({ color: 0x4a2a1a, roughness: 0.9 }); if (type === 'tower') { // 多层塔 for (let i = 0; i < 3; i++) { const base = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.8, 1.2), wallMat); base.position.y = i * 1.0 + 0.4; base.castShadow = true; group.add(base); const roof = new THREE.Mesh(new THREE.ConeGeometry(1.0, 0.5, 4), roofMat); roof.position.y = i * 1.0 + 1.0; roof.rotation.y = Math.PI/4; roof.castShadow = true; group.add(roof); } } else if (type === 'shrine') { const base = new THREE.Mesh(new THREE.BoxGeometry(2.0, 0.4, 1.5), wallMat); base.position.y = 0.2; base.castShadow = true; group.add(base); const pillar1 = new THREE.Mesh(new THREE.BoxGeometry(0.2, 1.2, 0.2), woodMat); pillar1.position.set(-0.8, 0.8, -0.5); pillar1.castShadow = true; group.add(pillar1); const pillar2 = pillar1.clone(); pillar2.position.set(0.8, 0.8, -0.5); group.add(pillar2); const roof = new THREE.Mesh(new THREE.BoxGeometry(2.4, 0.2, 1.8), roofMat); roof.position.y = 1.4; roof.castShadow = true; group.add(roof); } else { // 茶屋 const base = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.3, 1.2), wallMat); base.position.y = 0.15; base.castShadow = true; group.add(base); const roof = new THREE.Mesh(new THREE.ConeGeometry(1.2, 0.6, 4), roofMat); roof.position.y = 0.8; roof.rotation.y = Math.PI/4; roof.castShadow = true; group.add(roof); } group.position.set(x, 0.3, z); return group; } scene.add(createBuilding(3, 2, 'shrine')); scene.add(createBuilding(-2, 4, 'house')); scene.add(createBuilding(5, -2, 'tower')); scene.add(createBuilding(-4, -1, 'house')); // 石灯笼 const lanternMat = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.7 }); for (let i = 0; i < 6; i++) { const lantern = new THREE.Mesh(new THREE.CylinderGeometry(0.15, 0.2, 0.6), lanternMat); lantern.position.set(2 + i * 1.5, 0.3, -1 + (i % 2) * 2); lantern.castShadow = true; scene.add(lantern); } // 小桥 (红色木桥) const bridgeGroup = new THREE.Group(); const bridgeMat = new THREE.MeshStandardMaterial({ color: 0xaa4444, roughness: 0.7 }); for (let i = 0; i < 5; i++) { const plank = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.1, 1.2), bridgeMat); plank.position.set(i * 0.5 - 1, 0.4, 0); plank.castShadow = true; bridgeGroup.add(plank); } bridgeGroup.position.set(1, 0.2, 0); scene.add(bridgeGroup); // 落花 (粒子) const petalGeo = new THREE.BoxGeometry(0.08, 0.02, 0.08); const petalMat = new THREE.MeshStandardMaterial({ color: 0xffaacc, emissive: 0x331122 }); for (let i = 0; i < 60; i++) { const petal = new THREE.Mesh(petalGeo, petalMat); petal.position.set(Math.random() * 20 - 10, Math.random() * 5 + 0.5, Math.random() * 20 - 10); petal.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI); scene.add(petal); } // 远处雪山 (简单体素) const snowMat = new THREE.MeshStandardMaterial({ color: 0xccddff, roughness: 0.4 }); for (let i = 0; i < 8; i++) { const mountain = new THREE.Mesh(new THREE.ConeGeometry(2 + Math.random() * 2, 3 + Math.random() * 3, 6), snowMat); mountain.position.set(-15 + i * 5, 1, -20); mountain.castShadow = true; scene.add(mountain); } // 薄雾粒子 const mistParticles = new THREE.Points( new THREE.BufferGeometry(), new THREE.PointsMaterial({ color: 0x8899aa, size: 0.3, transparent: true, opacity: 0.2 }) ); const mistPos = []; for (let i = 0; i < 200; i++) { mistPos.push((Math.random() - 0.5) * 40, Math.random() * 3, (Math.random() - 0.5) * 40); } mistParticles.geometry.setAttribute('position', new THREE.Float32BufferAttribute(mistPos, 3)); scene.add(mistParticles); // --- 氛围切换 --- const atmosphereState = { dusk: { bg: 0x0a1a2a, fog: 0x0a1a2a, ambient: 0x404060, main: 0xbfcfff, exposure: 1.2 }, morning: { bg: 0x9ab8d8, fog: 0x9ab8d8, ambient: 0x8899aa, main: 0xffeedd, exposure: 1.4 }, rain: { bg: 0x2a3a4a, fog: 0x2a3a4a, ambient: 0x556677, main: 0x99aabb, exposure: 1.0 } }; let currentAtmosphere = 'dusk'; function setAtmosphere(type) { const s = atmosphereState[type]; scene.background.setHex(s.bg); scene.fog.color.setHex(s.fog); ambientLight.color.setHex(s.ambient); mainLight.color.setHex(s.main); renderer.toneMappingExposure = s.exposure; currentAtmosphere = type; // 更新按钮状态 document.querySelectorAll('[data-atmosphere]').forEach(btn => { btn.classList.toggle('active', btn.dataset.atmosphere === type); }); } // --- 镜头预设 --- const cameraPresets = { overview: { pos: [20, 12, 25], target: [0, 3, 0] }, river: { pos: [2, 1.5, 8], target: [1, 0.5, 0] }, temple: { pos: [-5, 2, 5], target: [-2, 1, 2] }, hill: { pos: [12, 8, -5], target: [5, 2, 0] } }; function setCamera(presetName) { const p = cameraPresets[presetName]; if (!p) return; // 平滑过渡 (简单lerp) const startPos = camera.position.clone(); const startTarget = controls.target.clone(); const endPos = new THREE.Vector3(...p.pos); const endTarget = new THREE.Vector3(...p.target); const duration = 800; const startTime = Date.now(); function animateTransition() { const elapsed = Date.now() - startTime; const t = Math.min(elapsed / duration, 1); const ease = t * t * (3 - 2 * t); camera.position.lerpVectors(startPos, endPos, ease); controls.target.lerpVectors(startTarget, endTarget, ease); controls.update(); if (t < 1) requestAnimationFrame(animateTransition); } animateTransition(); document.querySelectorAll('[data-camera]').forEach(btn => { btn.classList.toggle('active', btn.dataset.camera === presetName); }); } // --- 事件绑定 --- document.querySelectorAll('[data-camera]').forEach(btn => { btn.addEventListener('click', () => setCamera(btn.dataset.camera)); }); document.querySelectorAll('[data-atmosphere]').forEach(btn => { btn.addEventListener('click', () => setAtmosphere(btn.dataset.atmosphere)); }); document.getElementById('resetView').addEventListener('click', () => setCamera('overview')); document.getElementById('toggleUI').addEventListener('click', () => { const info = document.getElementById('info'); const controls = document.getElementById('controls'); const status = document.getElementById('status'); const hidden = info.style.display === 'none'; info.style.display = hidden ? 'block' : 'none'; controls.style.display = hidden ? 'flex' : 'none'; status.style.display = hidden ? 'block' : 'none'; }); document.getElementById('saveImage').addEventListener('click', () => { renderer.render(scene, camera); const link = document.createElement('a'); link.download = 'sakura_valley.png'; link.href = renderer.domElement.toDataURL('image/png'); link.click(); }); // 加载完成 document.getElementById('loading').style.display = 'none'; // 窗口大小自适应 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); }); // 动画循环 function animate() { requestAnimationFrame(animate); controls.update(); // 轻微动画 (落花旋转) scene.children.forEach(child => { if (child.isMesh && child.material && child.material.color.getHex() === 0xffaacc) { child.rotation.y += 0.01; } }); composer.render(); } animate(); // 默认蓝调 setAtmosphere('dusk'); setCamera('overview'); </script> </body> </html>