1. coolwater, 确实是很酷的water,其效果也相当不错。对于水域来说,
比单独画一个蓝色的多边形好很多。
2. 首先定义一个CoolWater的扩展对象,然后使用THREE.TextureLoader 进行加载
data/CoolWater-iChannel0.png 和 data/CoolWater-iChannel1.jpg。
1 let textureLoader = new THREE.TextureLoader(); 2 let iChannel0 = textureLoader.load('data/CoolWater-iChannel0.png'); 3 iChannel0.wrapS = iChannel0.wrapT = THREE.RepeatWrapping; 4 let iChannel1 = textureLoader.load('data/CoolWater-iChannel1.jpg'); 5 iChannel1.wrapS = iChannel1.wrapT = THREE.RepeatWrapping;
3. 使用 THREE.ShaderMaterial 将textureloader 加载为材质 Material
1 let material = this.material = new THREE.ShaderMaterial({ 2 fragmentShader, 3 uniforms: { 4 iTime: { 5 type: 'f', 6 value: 0 7 }, 8 iResolution: { 9 type: 'v3', 10 value: new THREE.Vector3(1, 1, 1) 11 }, 12 iChannel0: { 13 type: 't', 14 value: iChannel0 15 }, 16 iChannel1: { 17 type: 't', 18 value: iChannel1 19 } 20 } 21 });
4. 然后根据形状加载对应的材质
1 let size = layer.getMap().getSize(); 2 material.uniforms.iResolution.value.set(size.width, size.height, 1); 3 const geometry = getWaterGeometry(polygon, layer); 4 this._createMesh(geometry, material);
5. 水域的多边形数据使用的是 ./data/westlake.geojson
6. 添加水域
1 var waters; 2 function addWater() { 3 fetch('./data/westlake.geojson').then(function (res) { 4 return res.text(); 5 }).then(function (geojson) { 6 var polygons = maptalks.GeoJSON.toGeometry(geojson); 7 waters = polygons.map(p => new CoolWater(p, {}, threeLayer)); 8 9 threeLayer.addMesh(waters); 10 11 initGui(); 12 threeLayer.config('animation', true); 13 animation(); 14 }) 15 }
8. 源码地址
https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。