three-spritetext icon indicating copy to clipboard operation
three-spritetext copied to clipboard

When I use vue3+three-spritetext: 1.8.1+3d-force-graph: 1.73.0, an error is reported

Open bestrevens opened this issue 1 year ago • 2 comments

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)

bestrevens avatar Oct 25 '23 16:10 bestrevens