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

threelab

已于 2023-06-27 08:44:58 修改

阅读量239

点赞数 1

文章标签：智慧城市人工智能

于 2023-06-27 08:34:51 首次发布

本文链接：https://blog.csdn.net/huhuan123456/article/details/131409180

版权

三维智慧城市可视化之流动围墙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