海面 ·Ocean Shader· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么官方Water对象examples/jsm/objects/Water.jswaterNormals法线贴图 RepeatWrappinguniforms.time驱动波浪lil-gui 调waterColor / sunColor / sunDirection效果说明万级平面海面荡漾天空盒反射GLTF 挖掘机模型设envMap与环境一致GUI 实时改水体与太阳参数。核心概念import { Water } from three/examples/jsm/objects/Water.js;const water new Water(waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: new THREE.TextureLoader().load(waternormals.jpg, t { t.wrapS t.wrapT THREE.RepeatWrapping; }), sunDirection: new THREE.Vector3(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 3.7, fog: scene.fog ! undefined, }); water.rotation.x -Math.PI / 2;动画water.material.uniforms[time].value 1.0 / 60.0;每帧递增timeWater 内部 shader 算法线偏移与反射。GUIgui.addColor(water.material.uniforms[waterColor], value);gui.add(water.material.uniforms[sunDirection].value, x, -1, 1);实现步骤PlaneGeometry 10000×10000 创建 WaterCubeTexture 天空盒 → background 模型 envMapGLTFLoader 加载场景模型animate 更新 time controls render代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { Water } from three/examples/jsm/objects/Water.js; import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000000)camera.position.set(6, 3, 15)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping trueconst waterGeometry new THREE.PlaneGeometry(10000, 10000);const water new Water( waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: new THREE.TextureLoader().load( FILE_HOST /images/texture/waternormals.jpg, function (texture) { texture.wrapS texture.wrapT THREE.RepeatWrapping;}), sunDirection: new THREE.Vector3(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 3.7, fog: scene.fog ! undefined } );water.rotation.x - Math.PI / 2;scene.add(water);// 文件地址 const urls [0, 1, 2, 3, 4, 5].map(k (FILE_HOST files/sky/skyBox0/ (k 1) .png));const textureCube new THREE.CubeTextureLoader().load(urls);scene.background textureCube;new GLTFLoader().load(https://z2586300277.github.io/3d-file-server/models/glb/wajueji.glb,gltf {gltf.scene.traverse(child {if (child.isMesh) {child.material.envMap textureCube}})scene.add(gltf.scene)})const gui new GUI();gui.addColor(water.material.uniforms[waterColor], value).name(waterColor);gui.addColor(water.material.uniforms[sunColor], value).name(sunColor);gui.add(water.material.uniforms[sunDirection].value, x, - 1, 1).name(sunX);animate()function animate() {water.material.uniforms[time].value 1.0 / 60.0;requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}完整源码GitHub小结本文提供海面完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
Three.js 海面教程
海面 ·Ocean Shader· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么官方Water对象examples/jsm/objects/Water.jswaterNormals法线贴图 RepeatWrappinguniforms.time驱动波浪lil-gui 调waterColor / sunColor / sunDirection效果说明万级平面海面荡漾天空盒反射GLTF 挖掘机模型设envMap与环境一致GUI 实时改水体与太阳参数。核心概念import { Water } from three/examples/jsm/objects/Water.js;const water new Water(waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: new THREE.TextureLoader().load(waternormals.jpg, t { t.wrapS t.wrapT THREE.RepeatWrapping; }), sunDirection: new THREE.Vector3(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 3.7, fog: scene.fog ! undefined, }); water.rotation.x -Math.PI / 2;动画water.material.uniforms[time].value 1.0 / 60.0;每帧递增timeWater 内部 shader 算法线偏移与反射。GUIgui.addColor(water.material.uniforms[waterColor], value);gui.add(water.material.uniforms[sunDirection].value, x, -1, 1);实现步骤PlaneGeometry 10000×10000 创建 WaterCubeTexture 天空盒 → background 模型 envMapGLTFLoader 加载场景模型animate 更新 time controls render代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { Water } from three/examples/jsm/objects/Water.js; import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000000)camera.position.set(6, 3, 15)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping trueconst waterGeometry new THREE.PlaneGeometry(10000, 10000);const water new Water( waterGeometry, { textureWidth: 512, textureHeight: 512, waterNormals: new THREE.TextureLoader().load( FILE_HOST /images/texture/waternormals.jpg, function (texture) { texture.wrapS texture.wrapT THREE.RepeatWrapping;}), sunDirection: new THREE.Vector3(), sunColor: 0xffffff, waterColor: 0x001e0f, distortionScale: 3.7, fog: scene.fog ! undefined } );water.rotation.x - Math.PI / 2;scene.add(water);// 文件地址 const urls [0, 1, 2, 3, 4, 5].map(k (FILE_HOST files/sky/skyBox0/ (k 1) .png));const textureCube new THREE.CubeTextureLoader().load(urls);scene.background textureCube;new GLTFLoader().load(https://z2586300277.github.io/3d-file-server/models/glb/wajueji.glb,gltf {gltf.scene.traverse(child {if (child.isMesh) {child.material.envMap textureCube}})scene.add(gltf.scene)})const gui new GUI();gui.addColor(water.material.uniforms[waterColor], value).name(waterColor);gui.addColor(water.material.uniforms[sunColor], value).name(sunColor);gui.add(water.material.uniforms[sunDirection].value, x, - 1, 1).name(sunX);animate()function animate() {water.material.uniforms[time].value 1.0 / 60.0;requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}完整源码GitHub小结本文提供海面完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
