ocean

src/utils/plane_ocean2.js

@@ -0,0 +1,32 @@
+import * as THREE from 'three';
+import { Water } from 'three/examples/jsm/objects/Water.js';
+
+const waterGeometry = new THREE.PlaneGeometry(50, 50);
+
+const ocean = new Water(
+  waterGeometry,
+  {
+    textureWidth: 512,
+    textureHeight: 512,
+    waterNormals: new THREE.TextureLoader().load(`https://z2586300277.github.io/3d-file-server/images/texture/waternormals.jpg`, function (texture) {
+      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    }),
+    sunDirection: new THREE.Vector3(0, 1, 0), // 设置太阳方向为垂直向下
+    sunColor: 0xffffff,
+    waterColor: 'rgb(15,187,194)',
+    distortionScale: 3.7,
+    fog: false, // 关闭雾效果
+    alpha: 1.0, // 设置透明度
+  }
+);
+
+ocean.rotation.x = -Math.PI / 2;
+
+function animate() {
+  ocean.material.uniforms['time'].value += 1.0 / 60.0;
+  requestAnimationFrame(animate);
+}
+
+animate();
+
+export { ocean };

src/views/bigScreen/home/index.vue

@@ -69,7 +69,10 @@ 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";
-import { ocean } from "@/utils/plane_ocean.js";
+// import { ocean } from "@/utils/plane_ocean.js";
+
+import { ocean, textureCube } from "@/utils/plane_ocean2.js";
+
 export default {
   name: 'Home',
   props: {
@@ -281,7 +284,8 @@ export default {
     planeDesert.visible = false
     planeDesert.position.set(25, 1, 25)
     this.demo1.scene.add(planeDesert)
-    ocean.position.set(25, 1, 25)
+    console.log(ocean);
+    ocean.position.set(25, 2, 25)
     this.demo1.scene.add(ocean)
   },
   beforeDestroy() {