three.js 在三维空间中绘制线框

init() {
      this.scene = new this.$three.Scene();
      const axesHelper = new this.$three.AxesHelper(100);
      this.scene.add(axesHelper);
      
      this.createLine();

      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(30,30,30);
      this.camera.lookAt(0,0,0);

      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      this.renderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.renderer.domElement);

    },
    createLine() {
      let a = new this.$three.Vector3(10,0,0);
      let b = new this.$three.Vector3(0,10,0);
      let c = new this.$three.Vector3(0,0,10);
      let geometry = new this.$three.BufferGeometry().setFromPoints([a,b,c,a]);
      let material = new this.$three.LineBasicMaterial({color:0xffccdd});
      let line = new this.$three.Line(geometry, material);
      this.scene.add(line);
    }
  createLine2() {
      let arr = new Float32Array([
        20,0,0,
        0,20,0,
        0,0,20,
      ]);
      let position = new this.$three.BufferAttribute(arr, 3)
      let geometry = new this.$three.BufferGeometry();
      geometry.setAttribute("position", position);
      let material = new this.$three.LineBasicMaterial({color:0xb5a6dd});
      let line = new this.$three.LineLoop(geometry, material);
      // let line = new this.$three.Line(geometry, material);
      this.scene.add(line);
   
 
    },