11 changed files with 550 additions and 15090 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@ |
|||
export default{ |
|||
|
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
|
|||
export default { |
|||
guid: function () { |
|||
return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) { |
|||
var r = Math.random() * 16 | 0, |
|||
v = c == 'x' ? r : (r & 0x3 | 0x8); |
|||
return v.toString(16); |
|||
}); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
import { CSS2DRenderer, CSS2DObject } from 'jsm/renderers/CSS2DRenderer.js'; |
|||
export default { |
|||
createButton: function (obj, perent, i) { |
|||
|
|||
const btnDiv = document.createElement('button'); |
|||
btnDiv.className = 'btn'; |
|||
btnDiv.identifierName = 'btn'; |
|||
btnDiv.textContent = 'Btn： Click ...'; |
|||
btnDiv.style.marginTop = '-1em'; |
|||
btnDiv.style.zIndex = 1000; |
|||
|
|||
const css2dBtn = new CSS2DObject(btnDiv); |
|||
|
|||
css2dBtn.position.set(obj.x + 2, obj.y, obj.z); |
|||
css2dBtn.name = "datalabel" + i; |
|||
css2dBtn.userData = { name: "datalable", id: "", url: "" } |
|||
// css2DLabelList.add(css2DLabel);
|
|||
window.scene.add(css2dBtn); |
|||
|
|||
}, |
|||
|
|||
//创建标签
|
|||
createCSSLabel: function (text, x = 0, y = 0, z = 0, className = 'label') { |
|||
|
|||
const labelDiv = document.createElement('div'); |
|||
labelDiv.className = className; |
|||
labelDiv.name = "csslabeldiv" |
|||
labelDiv.textContent = text; |
|||
|
|||
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: "" } |
|||
return css2DLabel; |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
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.name = '标签' |
|||
labelMesh.position.set(x, y, z); |
|||
labelMesh.scale.set(0.005, 0.005, 0.005); |
|||
labelMesh.userData = { name: "imaglable", id: "", url: "" } |
|||
|
|||
return labelMesh; |
|||
|
|||
|
|||
}, |
|||
getTextCanvas1: function (text) { |
|||
var width = text.length * 12, height = 16; |
|||
var canvas = document.createElement('canvas'); |
|||
canvas.width = width; |
|||
canvas.height = height; |
|||
var ctx = canvas.getContext('2d'); |
|||
|
|||
|
|||
var devicePixelRatio = window.devicePixelRatio || 1; |
|||
var backingStoreRatio = ctx.webkitBackingStorePixelRatio || |
|||
ctx.mozBackingStorePixelRatio || |
|||
ctx.msBackingStorePixelRatio || |
|||
ctx.oBackingStorePixelRatio || |
|||
ctx.backingStorePixelRatio || 1; |
|||
var ratio = devicePixelRatio / backingStoreRatio; |
|||
// debugger
|
|||
canvas.width = canvas.width * ratio; |
|||
canvas.height = canvas.height * ratio; |
|||
width = canvas.width; |
|||
height = canvas.height; |
|||
ctx.scale(ratio, ratio); |
|||
ctx.translate(0.5, 0.5); |
|||
ctx.lineWidth = 1; |
|||
ctx.moveTo(2.5, 2); |
|||
ctx.lineTo(98.5, 2); |
|||
ctx.lineTo(98.5, 98); |
|||
ctx.lineTo(2.5, 98); |
|||
ctx.lineTo(2.5, 2); |
|||
ctx.stroke(); |
|||
|
|||
|
|||
|
|||
ctx.fillStyle = '#CfCfC3'; |
|||
ctx.fillRect(0, 0, width, height); |
|||
ctx.font = 10 + 'px " bold '; |
|||
ctx.fillStyle = '#000000'; |
|||
ctx.textAlign = 'center'; |
|||
ctx.textBaseline = 'middle'; |
|||
|
|||
ctx.fillText(text, width / 2 / ratio, height / 2 / ratio); |
|||
return canvas; |
|||
}, |
|||
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); |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue