Skip to content

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

Open
@bestrevens

Description

@bestrevens

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions