技能点：threejs,Vue,canvas,几何数学。
展示网站：http://jstopo.top 模型上方图标贴图文章来源：https://www.toymoban.com/news/detail-609593.html
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文字贴图文章来源地址https://www.toymoban.com/news/detail-609593.html
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 );
}
到了这里，关于threejs 3d网络设备拓扑图绘制示例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
