From b9da071c59a087c4c8da86d0e234862621e83529 Mon Sep 17 00:00:00 2001 From: nicomacbookpro <805879871@qq.com> Date: Thu, 21 Aug 2025 11:18:47 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B2=99=E6=BC=A0=E5=9C=B0=E5=BD=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/plane_desert.js | 158 +++++++++++++++++++++++++++++ src/utils/three.js | 11 +- src/views/bigScreen/home/index.vue | 12 +-- 3 files changed, 167 insertions(+), 14 deletions(-) create mode 100644 src/utils/plane_desert.js diff --git a/src/utils/plane_desert.js b/src/utils/plane_desert.js new file mode 100644 index 0000000..3c05a4e --- /dev/null +++ b/src/utils/plane_desert.js @@ -0,0 +1,158 @@ +import * as THREE from 'three' +import { ImprovedNoise } from 'three/examples/jsm/math/ImprovedNoise.js' + +// 分数布朗运动着色器 +const fbmShader = ` + #define NUM_OCTAVES 6 + + float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;} + vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;} + vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);} + + float noise(vec3 p){ + vec3 a = floor(p); + vec3 d = p - a; + d = d * d * (3.0 - 2.0 * d); + + vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0); + vec4 k1 = perm(b.xyxy); + vec4 k2 = perm(k1.xyxy + b.zzww); + + vec4 c = k2 + a.zzzz; + vec4 k3 = perm(c); + vec4 k4 = perm(c + 1.0); + + vec4 o1 = fract(k3 * (1.0 / 41.0)); + vec4 o2 = fract(k4 * (1.0 / 41.0)); + + vec4 o3 = o2 * d.z + o1 * (1.0 - d.z); + vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x); + + return o4.y * d.y + o4.x * (1.0 - d.y); + } + + float fbm(vec3 x) { + float v = 0.0; + float a = 0.5; + vec3 shift = vec3(100); + for (int i = 0; i < NUM_OCTAVES; ++i) { + v += a * noise(x); + x = x * 2.0 + shift; + a *= 0.5; + } + return v; + } +` + +// 全局uniforms +const globalUniforms = { + time: { value: 0 } +} + +// 创建沙漠地形 +const createDesertTerrain = () => { + const perlin = new ImprovedNoise() + const plane = new THREE.PlaneGeometry(50, 50, 500, 500) + plane.rotateX(-Math.PI / 2) + + const { position } = plane.attributes + const uv = plane.attributes.uv + const v2 = new THREE.Vector2() + + for (let i = 0; i < position.count; i++) { + v2.fromBufferAttribute(uv, i).multiplyScalar(15) + let n = perlin.noise(v2.x, v2.y, 0.314) + n = Math.abs(n) + n = Math.pow(n, 3) + position.setY(i, Math.min(n * 35, 10)) + } + + plane.computeVertexNormals() + + const material = new THREE.MeshBasicMaterial({ + color: 0xface8d + }) + + // 自定义着色器 + material.onBeforeCompile = (shader) => { + shader.uniforms.time = globalUniforms.time + + shader.vertexShader = ` + varying vec3 vPos; + ${shader.vertexShader} + `.replace(`#include `, `#include + vPos = position;`) + + shader.fragmentShader = ` + #define ss(a,b,c) smoothstep(a,b,c) + uniform float time; + varying vec3 vPos; + ${fbmShader} + ${shader.fragmentShader} + `.replace(`vec4 diffuseColor = vec4( diffuse, opacity );`, ` + vec3 col = diffuse; + + // 基础沙漠颜色 + vec3 sandDark = vec3(0.65, 0.55, 0.35); + vec3 sandMid = vec3(0.78, 0.68, 0.48); + vec3 sandLight = vec3(0.92, 0.82, 0.62); + vec3 sandWarm = vec3(0.85, 0.72, 0.52); + + // 基于高度的颜色混合 + float h = clamp(vPos.y / 10.0, 0.0, 1.0); + vec3 baseColor; + if (h < 0.3) { + baseColor = mix(sandDark, sandMid, h / 0.3); + } else if (h < 0.7) { + baseColor = mix(sandMid, sandWarm, (h - 0.3) / 0.4); + } else { + baseColor = mix(sandWarm, sandLight, (h - 0.7) / 0.3); + } + + // 添加噪声纹理 + float d = noise(vPos * vec3(0.05, 1, 0.05)); + col = mix(baseColor, baseColor + 0.1, d); + + // 添加沙丘纹理 + vec3 strokePos = vPos * vec3(0.1, 3., 0.1); + d = fbm(strokePos); + float e = fwidth(strokePos.y); + col = mix(col * (0.5 + 0.5 * ss(2., 8., vPos.y)), col, ss(0.4 - e, 0.4, abs(d))); + + // 风效果 + float dw = noise(vec3(vPos.x, vPos.y, vPos.z + time) * vec3(0.1, 10, 0.1)); + d = ss(0.1, 0., abs(dw)); + d = max(d, ss(1., 0., abs(dw))); + d = max(d, pow(abs(noise(vPos - vec3(0, 0, time))), 1.)); + d *= smoothstep(2., -0.5, abs(vPos.y)); + col = mix(col, baseColor + 0.25, d); + + // 添加阴影效果 + float shadow = 1.0 - h * 0.3; + col *= shadow; + + // 在高处添加阳光反射 + if (h > 0.7) { + float highlight = pow(h - 0.7, 2.0) * 0.2; + col += highlight; + } + + vec4 diffuseColor = vec4( col, opacity ); + `).replace(`#include `, ` + gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.5, 1, 0.875), pow(ss(7., 10., vPos.y), 0.5)); + `) + } + + const terrain = new THREE.Mesh(plane, material) + return terrain +} + +// 创建沙漠地形mesh +const planeDesert = createDesertTerrain() + +// 更新时间函数 +const updateTime = (time) => { + globalUniforms.time.value = time +} + +export { planeDesert, updateTime, globalUniforms } diff --git a/src/utils/three.js b/src/utils/three.js index 69d451c..67a7a5c 100644 --- a/src/utils/three.js +++ b/src/utils/three.js @@ -90,7 +90,11 @@ function createDashedLinesForBall( line.computeLineDistances(); scene.add(line); // return line; - + // let light = new THREE.DirectionalLight(0xffffff, 0.25); + // light.position.setScalar(1); + // scene.add(light); + let light = new THREE.AmbientLight(0xffffff, 0.75); + scene.add(light); // 创建箭头 const dir = new THREE.Vector3(); // if (direction === "down") dir.set(0, -1, 0); @@ -528,9 +532,6 @@ export function drawAxes(element, options = {}, ballCallBack) { // 可选：底部加一块水面（水面动画来自 Water.js） if (show_water) { - // const light = new THREE.DirectionalLight(0xffffbb, 1); - // light.position.set(-1, 1, -1); - // scene.add(light); const waterNormals = new THREE.TextureLoader().load( "/textures/water_1.png", (t) => { @@ -726,7 +727,7 @@ export function drawAxes(element, options = {}, ballCallBack) { }); styleGroups["灰球"] = null; const lineGeometryColors = [ - "#0x00ff00", + "#779c6e", "#779c6e", "#3ee4bc", "#ca41e7", diff --git a/src/views/bigScreen/home/index.vue b/src/views/bigScreen/home/index.vue index c5a9d02..06a4527 100644 --- a/src/views/bigScreen/home/index.vue +++ b/src/views/bigScreen/home/index.vue @@ -56,6 +56,7 @@ import { drawAxes } from "@/utils/three.js"; import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js"; import { planeGrass } from "@/utils/plane_grass.js"; +import { planeDesert } from "@/utils/plane_desert.js"; export default { name: 'Home', props: { @@ -260,15 +261,8 @@ export default { this.onBallClick(falg, val) }) this.legendList = this.demo1.getGroups() - planeGrass.position.set(25, 1, 25) - this.demo1.scene.add(planeGrass) - function animate(time) { - requestAnimationFrame(animate) - planeGrass.update(time) - } - animate() - - + planeDesert.position.set(25, 2, 25) + this.demo1.scene.add(planeDesert) }, beforeDestroy() {