沙漠地形

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 <begin_vertex>`, `#include <begin_vertex>
+      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 <dithering_fragment>`, `
+      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 }

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",

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() {