threejs--BufferGeometry创建线条

待我称王封你为后i 2022-09-10 15:11 377阅读 0赞

效果图：

在这里插入图片描述

代码实现：

方法一：

const pointArr = new Float32Array([
        -347, 50, -520,
        -347, 50, 127,
        -345, 50, 145,
        -339, 50, 185,
        -284, 50, 270,
        -71, 50, 543
      ])
      const geometry = new THREE.BufferGeometry()
      geometry.setAttribute('position', new BufferAttribute(pointArr, 3))
      const lineMaterial = new THREE.LineBasicMaterial({  color: '#ff0000', side: THREE.DoubleSide })
      const line = new THREE.Line(geometry, lineMaterial)
      this.scene.add(line)

方法二：

const pointArr = [
        -347, 50, -520,
        -347, 50, 127,
        -345, 50, 145,
        -339, 50, 185,
        -284, 50, 270,
        -71, 50, 543
      ]
      const geometry = new THREE.BufferGeometry()
      geometry.setAttribute('position', new Float32BufferAttribute(pointArr, 3))
      const lineMaterial = new THREE.LineBasicMaterial({  color: '#ff0000', side: THREE.DoubleSide })
      const line = new THREE.Line(geometry, lineMaterial)
      this.scene.add(line)