three 基础库
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

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