画线（Drawing lines）

画线（Drawing lines）

这里使用的是vue组件来实现three.js画线

定义 id为container的div接收绘制出的线条

<template>
  <div class="lines">
    <h2>画线（Drawing lines）</h2>
    <div id="container"></div>
  </div>
</template>

在methods中定义init方法

init() {
      //容器
      let container = document.getElementById("container")
      //渲染器
      let renderer = new THREE.WebGLRenderer()
      renderer.setSize(580,510)
      //相机
      let camera = new THREE.PerspectiveCamera(80, container.clientWidth / container.clientHeight, 1, 500)
      //相机位置
      camera.position.set(100, 100, 100)
      //相机视角看向原点
      //默认情况下，是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样
      //如果不设置lookAt，相机看向的就是position的z值垂直向里看的方向
      camera.lookAt(0, 0, 0)
      //场景
      let scene = new THREE.Scene()
      //定义划线的材质 对于线条来说，我们能使用的材质只有LineBasicMaterial 或者 LineDashedMaterial。
      let material = new THREE.LineBasicMaterial({color:0x0000ff })
      //定义顶点  顶点的Geometry 或者 BufferGeometry。（推荐使用BufferGeometry，因为它在性能上表现得会更好一些；但在这里，为了简单起见，我们使用Geometry）
      let geometry =new THREE.Geometry()
      geometry.vertices.push(new THREE.Vector3(-100,80,0))
      geometry.vertices.push(new THREE.Vector3(0,100,0))
      geometry.vertices.push(new THREE.Vector3(0,0,100))
      //既然我们已经有了能够画两条线的点和一个材质，那我们现在就可以将他们组合在一起，形成一条线。
      let line = new THREE.Line(geometry,material)
      //添加到场景中，并调用render（渲染）函数。
      scene.add(line)
      renderer.render(scene,camera)
      container.appendChild(renderer.domElement)
    }
  }

mounted页面数据加载时调用方法

 this.init()

效果图