threejs绘制多个多边形

bidepanm

已于 2022-08-26 11:41:33 修改

阅读量1.4k

点赞数

文章标签：地图

于 2022-08-24 18:31:33 首次发布

本文链接：https://blog.csdn.net/bidepanm/article/details/126510330

版权

points格式：
在这里插入图片描述

drawPolygon(points, index) {
        const coordinates = points.map(item => {
            return [item.x, item.y];
        });
       
        const shape = new THREE.Shape();
        coordinates.forEach(( v, j) => {
        	// 左边转换工具
            const coord = this.customCoords.lngLatToCoord(v);
            if( j === 0) {
                shape.moveTo(...coord);
            } else {
                shape.lineTo(...coord);
            }
        });
        const geometry = new THREE.ShapeGeometry(shape);
        // 材质
        this.roadMaterial = new THREE.MeshPhongMaterial( {
                color: 'rgba(0, 224, 150)',
                // 增加透明度
                transparent: true,
                opacity: 0.5,
                polygonOffset: true,
                polygonOffsetFactor: -0.1,
                polygonOffsetUnits: -2.9
            });
        this[`mesh${index}`] = new THREE.Mesh(geometry, this.roadMaterial);
        this[`mesh${index}`].position.setZ(0.1);
        this[`mesh${index}`].matrixAutoUpdate  = false;
        this.scene.add(this[`mesh${index}`]);
        // 绘制边框线
        const lineGeom = new THREE.EdgesGeometry(geometry);
        const lineMaterial = new THREE.LineBasicMaterial({
            color: 0x00fbff,
            linewidth: 1,
            linecap: 'round',
            linejoin: 'round'
        });
        this[`line${index}`] = new THREE.LineSegments(lineGeom, lineMaterial);
        this[`line${index}`].scale.copy(this[`mesh${index}`].scale);
        this[`line${index}`].rotation.copy(this[`mesh${index}`].rotation);
        this[`line${index}`].position.copy(this[`mesh${index}`].position);
        this.scene.add(this[`line${index}`]);
    }