三维智慧城市可视化之流动围墙01

     围墙是比较常用的效果,也是比较简单的效果,有很多种做法,我尽量把工作中或者网上看到的效果,开发出来,分享给大家,希望有所帮助!

下载地址:https://download.csdn.net/download/huhuan123456/87952164

流动围墙:思路

1.根据点位和高度,绘制三角网格,创建平面

2.创建两个mesh,一个用于绘制渐变效果,一个用于绘制流动效果

3.可以利用着色器绘制渐变和流动,我这里先用图片实现(图片比较灵活)

4.让流动的图片材质,offset 一下,就可以了

亲,很简单吧,赶快去实现吧!!!

 import * as THREE from '../../dist/three.module.js';
    import {
        MapViewer, Polygon, TilesLayer, Wall
    } from '../../dist/xmap.js'; 
    let mapViewer = new MapViewer('map', {
        bgColor: "#000000", yaw: 30, pitch: 30, zoom: 18,
        center: [
            0, 0, 0]
    });

    var vertices = [
        [0, 0], [100, 0], [100, 100], [0, 100], [0, 0]
    ]
    let wall = new Wall({ vertices: vertices, color: '#00ff00', imgUrl: '../mesh/jianbian.png', imgUrl2: '../mesh/liudong.png' });
    mapViewer.addAnimate(wall); 

技术交流: qq 2945853209

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐