three.js一步一步來--如何畫出一根線

下面是畫出線的代碼，可以參考一下喲~~

<template>
  <div style="width:1000px; height:800px">
    <p>點、線、面</p>
    <div ref="myBody" />
  </div>
</template>

<script>
import * as THREE from 'three'
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
// import MTLLoader from  'three-mtl-loader';
// import OBJLoader from  'three-obj-loader';
import { CSS2DRenderer, CSS2DObject } from 'three-css2drender'
// import { Geometry, Material, Scene, WebGLBufferRenderer } from 'three';
// const OrbitControls = require('three-orbit-controls')(THREE);
export default {
  data() {
    return {
      scene: new THREE.Scene(), 
      camera: new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        10000
      ), // 透視相機
      renderer: new THREE.WebGLRenderer(), // 渲染器
      geometry: new THREE.Geometry(), // 物體
      material: new THREE.LineBasicMaterial({ vertexColors: true }), // 材料
      cube: {}, // 合起來
      // 線條
      light: new THREE.DirectionalLight(0xff0000, 1.0, 0)
    }
  },
  mounted() {
    this.threeStart()
  },
  methods: {
    consoleObj() {
      console.log(THREE.REVISION)
      console.log(OBJLoader)
      console.log(MTLLoader)
      console.log(CSS2DRenderer)
      console.log(CSS2DObject)
    },
    initThree() {
      this.renderer = new THREE.WebGLRenderer({
        antialias: true
      })
      this.renderer.setSize(window.innerWidth, window.innerHeight) // 渲染器窗口大小
      this.$refs.myBody.appendChild(this.renderer.domElement) // 將東西放到界面
      this.renderer.setClearColor(0xffffff, 1.0) // 渲染器背景色
    },
    initCamera() {
      this.camera = new THREE.PerspectiveCamera(45, 1.5, 1, 10000)
      this.camera.position.x = 0
      this.camera.position.y = 1000
      this.camera.position.z = 0
      this.camera.up.x = 0
      this.camera.up.y = 0
      this.camera.up.z = 1
      this.camera.lookAt(0, 0, 0)
    },
    initScene() {
      this.scene = new THREE.Scene()
    },
    initLight() {
      this.light = new THREE.DirectionalLight(0xff0000, 1.0, 0)
      this.light.position.set(100, 100, 200)
      this.scene.add(this.light)
    },
    initObject() {
      var color1 = new THREE.Color(0x444444)
      var color2 = new THREE.Color(0xff0000)
      // 設置材質
      var p1 = new THREE.Vector3(-100, 0, 100)
      var p2 = new THREE.Vector3(100, 0, -100)
      this.geometry.vertices.push(p1, p2)
      this.geometry.colors.push(color1, color2)
      var line = new THREE.Line(
        this.geometry,
        this.material,
        THREE.LineSegments
      )
      this.scene.add(line)
    },
    threeStart() {
      this.initThree()
      this.initCamera()
      this.initScene()
      this.initLight()
      this.initObject()
      // this.renderer.clear()
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>
<style lang="less" scoped></style>