three-spritetext
three-spritetext copied to clipboard
When I use vue3+three-spritetext: 1.8.1+3d-force-graph: 1.73.0, an error is reported
error: Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<_Matrix4>' but got '#<_Matrix4>') at Proxy.raycast (three.module.js:31257:8) at intersectObject (three.module.js:49491:10) at intersectObject (three.module.js:49501:4) at Raycaster.intersectObjects (three.module.js:49469:4) at HTMLCanvasElement.onPointerMove (DragControls.js:102:16)
my code: import ForceGraph3D from '3d-force-graph' import SpriteText from 'three-spritetext'
const elm = document.getElementById('3d-graph')
this.Graph = ForceGraph3D()(elm)
.graphData(this.data)
this.Graph.height(750).width(1200)
.backgroundColor('#9dadc1')
// 节点样式和标签设置
.nodeRelSize(7)
.nodeColor(node => {
let index = 0
switch(node.label) {
case this.labels[0]: break;
case this.labels[1]: index = 1;break;
case this.labels[2]: index = 2;break;
default: index = 3;break;
}
return this.nodeColors[index]
})
.nodeThreeObject(node => {
const sprite = new SpriteText(node.properties.name)
sprite.material.depthWrite = false // make sprite background transparent
let i = 0
for (;i < this.labels.length;i++) {
if (node.label === this.labels[i]) break
}
sprite.color = this.nodeColors[i]
sprite.textHeight = 8
return sprite
})
.nodeThreeObjectExtend(true)
.nodeLabel(node => `${node.label}: ${node.properties.name}`)
.nodeOpacity(0.75)
.onNodeHover(node => elm.style.cursor = node ? 'pointer' : null)
.onNodeClick(node => {
console.log(node)
this.selectNodeData.id = node.id;
this.selectNodeData.name = node.properties.name;
let i = 0
for (;i < this.labels.length;i++) {
if (node.label === this.labels[i]) break
}
this.selectNodeData.color = this.nodeColors[i];
this.selectNodeData.properties = node.properties;
})
this.Graph.d3Force('charge').strength(-150)