绘制3d的墙面

有时业务里我们需要绘制3d的物体，比如墙，道路，树等

这里介绍下怎样实现这些功能,这里我们来实现下3D围墙的绘制

主要思路

利用绘制工具绘制几何体路径(LineString)
动态创建这些3d图形和模型
利用maptalks里支持3d的图层来渲染即可

编码

maptalks.three插件里提供了toExtrudeLine方法，可以将线条拔高，当线条绘制时我们只需要动态创建一个extrudeline即可

TIP

three插件就是用来干这个的，当我们业务里需要自定义这些奇奇怪怪的图形效果时特别适合

function createWall(lineString) {
    const wall = threeLayer.toExtrudeLine(
        lineString,
        { height, width: 6 },
        material,
    );
    threeLayer.addMesh(wall);
    const coordinates = lineString.getCoordinates();
    const bars = coordinates.map((c) => {
        return threeLayer.toBar(
            c,
            { height: height + 5, radius: 10, radialSegments: 40 },
            material,
        );
    });
    threeLayer.addMesh(bars);
    const top = threeLayer.toExtrudeLine(
        lineString,
        { width: 30, height: 6, altitude: height },
        material1,
    );
    threeLayer.addMesh(top);
}

然后选择一个合适的纹理贴下图即可

const material = new THREE.MeshPhongMaterial({ color: "#fff" });
const material1 = new THREE.MeshPhongMaterial({ color: "#fff" });
// const material2 = new THREE.MeshPhongMaterial({ color: 'gray' });

function loadTexture() {
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load("./../assets/image/wall.jpg", (texture) => {
        texture.needsUpdate = true; //使用贴图时进行更新
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        // texture.repeat.set(0.002, 0.002);
        texture.repeat.set(1, 1);
        material.map = texture;
        material.needsUpdate = true;
    });

    textureLoader.load("./../assets/image/wall-vertex.jfif", (texture) => {
        texture.needsUpdate = true; //使用贴图时进行更新
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        // texture.repeat.set(0.002, 0.002);
        texture.repeat.set(6, 3);
        material1.map = texture;
        material1.needsUpdate = true;
    });
}