1.LineBasicMaterial材质介绍

LineBasicMaterial材质是用来渲染线段的材质，可以通过该材质来设置线段的颜色、宽度、端点和连接点，下面是该材质的常用属性

2.demo效果

3.demo代码

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
  data() {
    return {
      points: [],
      turtle: [0, 0, 0],
      count: 0,
      line: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    gosper(a, b) {
      this.turtle = [0, 0, 0]
      this.count = 0
      this.rg(a, b)
    },

    rt(x) {
      this.turtle[2] += x
    },

    lt(x) {
      this.turtle[2] -= x
    },

    fd(dist) {
      //                ctx.beginPath();
      this.points.push({
        x: this.turtle[0],
        y: this.turtle[1],
        z: Math.sin(this.count) * 5
      })
      //                ctx.moveTo(this.turtle[0], this.turtle[1]);

      const dir = this.turtle[2] * (Math.PI / 180)
      this.turtle[0] += Math.cos(dir) * dist
      this.turtle[1] += Math.sin(dir) * dist

      this.points.push({
        x: this.turtle[0],
        y: this.turtle[1],
        z: Math.sin(this.count) * 5
      })
      //                ctx.lineTo(this.turtle[0], this.turtle[1]);
      //                ctx.stroke();
    },

    rg(st, ln) {
      st--
      ln = ln / 2.6457
      if (st > 0) {
        //                    ctx.strokeStyle = '#111';
        this.rg(st, ln)
        this.rt(60)
        this.gl(st, ln)
        this.rt(120)
        this.gl(st, ln)
        this.lt(60)
        this.rg(st, ln)
        this.lt(120)
        this.rg(st, ln)
        this.rg(st, ln)
        this.lt(60)
        this.gl(st, ln)
        this.rt(60)
      }
      if (st == 0) {
        this.fd(ln)
        this.rt(60)
        this.fd(ln)
        this.rt(120)
        this.fd(ln)
        this.lt(60)
        this.fd(ln)
        this.lt(120)
        this.fd(ln)
        this.fd(ln)
        this.lt(60)
        this.fd(ln)
        this.rt(60)
      }
    },

    gl(st, ln) {
      st--
      ln = ln / 2.6457
      if (st > 0) {
        //                    ctx.strokeStyle = '#555';
        this.lt(60)
        this.rg(st, ln)
        this.rt(60)
        this.gl(st, ln)
        this.gl(st, ln)
        this.rt(120)
        this.gl(st, ln)
        this.rt(60)
        this.rg(st, ln)
        this.lt(120)
        this.rg(st, ln)
        this.lt(60)
        this.gl(st, ln)
      }
      if (st == 0) {
        this.lt(60)
        this.fd(ln)
        this.rt(60)
        this.fd(ln)
        this.fd(ln)
        this.rt(120)
        this.fd(ln)
        this.rt(60)
        this.fd(ln)
        this.lt(120)
        this.fd(ln)
        this.lt(60)
        this.fd(ln)
      }
    },
    // 创建网格模型
    createMesh() {
      this.gosper(4, 60) //获取线顶点
      const lines = new THREE.Geometry()
      const colors = []
      let i = 0
      this.points.forEach(function(e) {
        lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y))
        colors[i] = new THREE.Color(0xffffff)
        colors[i].setHSL(e.x / 100 + 0.5, (e.y * 20) / 300, 0.8)
        i++
      })

      lines.colors = colors
      //创建线材质
      const material = new THREE.LineBasicMaterial({
        opacity: 1.0,
        linewidth: 1,
        vertexColors: THREE.VertexColors
      })

      this.line = new THREE.Line(lines, material)
      this.line.position.set(25, -30, -60)
      this.scene.add(this.line)
    },

    // 创建光源
    createLight() {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(-40, 60, -10)
      spotLight.castShadow = true
      this.scene.add(spotLight)
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
      this.camera.position.set(-80, 60, 40) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    render() {
      this.line.rotation.z += 0.01
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>
<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>