threejs 3d拓扑图，Vue框架大屏展示。

采用threejs绘制拓扑图， 技术点:THREE.js,Vue,canvas,几何数学。

function drawFaceIcon(scene,url,obj){//图标贴图
    const geometry = new THREE.PlaneBufferGeometry( 50, 50 );
    const texLoader = new THREE.TextureLoader();
    const texture = texLoader.load(url);
    const material = new THREE.MeshLambertMaterial({
        map: texture,//map表示材质的颜色贴图属性
        side: THREE.DoubleSide,
        transparent: true
    });
    const plane = new THREE.Mesh( geometry, material );
    plane.rotateX(-Math.PI/2);plane.position.set(obj.x, obj.y, obj.z);
    scene.add( plane );
}

const uvCanvasImage = (scene,obj)=>{//旁边canvas文字贴图
    let canvas = document.createElement("canvas");
        canvas.width = 136;canvas.height = 36;
    let ctx = canvas.getContext('2d');
        ctx.font = "22px 黑体";
        // ctx.fillStyle = "#fff";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(obj.text, 68, 18);
    let texture = new THREE.CanvasTexture(canvas);
    const geometry = new THREE.PlaneGeometry( 136, 36 );
    const material = new THREE.MeshLambertMaterial({
        map: texture,//map表示材质的颜色贴图属性
        side: THREE.DoubleSide,
        transparent: false
    });
    const plane = new THREE.Mesh( geometry, material );
          plane.rotateX(-Math.PI/2);
          plane.position.set(obj.x, obj.y, obj.z);
    scene.add( plane );
}

展示网站：[http://jstopo.top](http://jstopo.top)