threejs 3d网络设备拓扑图绘制示例

技能点：threejs,Vue,canvas,几何数学。
展示网站：http://jstopo.top 模型上方图标贴图

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 );
}

canvas文字贴图

const uvCanvasImage = (scene,obj)=>{//旁边文字贴图
    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 );
}