You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.4 KiB
108 lines
3.4 KiB
2 years ago
|
import * as THREE from 'three';
|
||
|
|
export default {
|
||
|
|
//添加模型标签
|
||
|
|
createRemarkLabel: function (text, x = 0, y = 0, z = 0) {
|
||
|
|
|
||
|
|
|
||
|
|
let labelCanvas = this.getTextCanvas(text);
|
||
|
|
const labelTexture = new THREE.Texture(labelCanvas);
|
||
|
|
// labelTexture.magFilter = THREE.LinearFilter;
|
||
|
|
// labelTexture.minFilter = THREE.LinearFilter;
|
||
|
|
labelTexture.needsUpdate = true;
|
||
|
|
|
||
|
|
const labelMaterial = new THREE.MeshBasicMaterial({
|
||
|
|
map: labelTexture,
|
||
|
|
side: THREE.DoubleSide
|
||
|
|
});
|
||
|
|
labelMaterial.transparent = true;
|
||
|
|
const labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);
|
||
|
|
|
||
|
|
let labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
|
||
|
|
// labelMesh.uuid="";
|
||
|
|
labelMesh.name = '标签'
|
||
|
|
labelMesh.position.set(x, y, z);
|
||
|
|
|
||
|
|
labelMesh.userData = { name: "imaglable", id: "", url: "" }
|
||
|
|
|
||
|
|
return labelMesh;
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
updateRemarkLabel: function (text, x = 0, y = 0, z = 0) {
|
||
|
|
|
||
|
|
|
||
|
|
let labelCanvas = this.getTextCanvas(text);
|
||
|
|
const labelTexture = new THREE.Texture(labelCanvas);
|
||
|
|
|
||
|
|
labelTexture.needsUpdate = true;
|
||
|
|
|
||
|
|
const labelMaterial = new THREE.MeshBasicMaterial({
|
||
|
|
map: labelTexture,
|
||
|
|
side: THREE.DoubleSide
|
||
|
|
});
|
||
|
|
labelMaterial.transparent = true;
|
||
|
|
const labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);
|
||
|
|
|
||
|
|
let labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
|
||
|
|
// labelMesh.uuid="";
|
||
|
|
labelMesh.name = '标签'
|
||
|
|
labelMesh.position.set(x, y, z);
|
||
|
|
|
||
|
|
labelMesh.userData = { name: "imaglable", id: "", url: "" }
|
||
|
|
|
||
|
|
return labelMesh;
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
getTextCanvas: function (text) {
|
||
|
|
var width = text.length * 24, height = 32;
|
||
|
|
var canvas = document.createElement('canvas');
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
ctx.fillStyle = '#CfCfC3';
|
||
|
|
ctx.fillRect(0, 0, width, height);
|
||
|
|
ctx.font = 20 + 'px " bold ';
|
||
|
|
ctx.fillStyle = '#000000';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
|
||
|
|
ctx.fillText(text, width / 2, height / 2);
|
||
|
|
return canvas;
|
||
|
|
},
|
||
|
|
// //普通标签
|
||
|
|
// addLabel: async function (parent, x = 0, y = 0, z = 0, className = 'label') {
|
||
|
|
// console.log("parent.name=", parent.name)
|
||
|
|
// if (!parent.name) {
|
||
|
|
|
||
|
|
// return;
|
||
|
|
// }
|
||
|
|
// console.log("parent.name2=", parent.name)
|
||
|
|
// let item = await getlabel(parent.name);
|
||
|
|
// console.log("item2=", item)
|
||
|
|
// // debugger
|
||
|
|
// if (!item) return;
|
||
|
|
// console.log("item2=", item)
|
||
|
|
// const labelDiv = document.createElement('div');
|
||
|
|
// labelDiv.className = className;
|
||
|
|
// labelDiv.name = "csslabel";
|
||
|
|
// labelDiv.textContent = item.text;
|
||
|
|
// labelDiv.style.marginTop = '-1em';
|
||
|
|
|
||
|
|
// labelDiv.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
|
||
|
|
// const css2DLabel = new CSS2DObject(labelDiv);
|
||
|
|
// css2DLabel.position.set(x, y, z);
|
||
|
|
// css2DLabel.name = "datalabel"
|
||
|
|
// css2DLabel.userData = { name: "datalable", id: "", url: "" }
|
||
|
|
// // css2DLabelList.add(css2DLabel);
|
||
|
|
// if (parent) {
|
||
|
|
// parent.add(css2DLabel);
|
||
|
|
|
||
|
|
// } else {
|
||
|
|
// window.scene.add(css2DLabel);
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
// }
|
||
|
|
}
|