diff --git a/src/utils/plane_ocean2.js b/src/utils/plane_ocean2.js new file mode 100644 index 0000000..b9f7a7e --- /dev/null +++ b/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 }; diff --git a/src/views/bigScreen/home/index.vue b/src/views/bigScreen/home/index.vue index ec161df..ea09db5 100644 --- a/src/views/bigScreen/home/index.vue +++ b/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() {