three.js之材质-LineDashedMaterial介绍和使用(vue中使用three.js20)

1.LineDashedMaterial材质介绍

LineDashedMaterial材质有和LineBasicMaterial材质一样的属性，还有几个额外的属性可以用来定义短划线长度和短划线中间空格长度

属性	描述
color	指定线的颜色，如果指定了vertexColor，该属性会被忽略
linewidth	通过该属性定义线的宽度
LineCap	此属性定义顶点间的线段端点如何显示。可选的值包括：butt（平）、round（圆）、square（方）。默认值是 round。实际应用中，修改这个属性的结果很难看出来WebGLRender不支持该属性
LineJoin	此属性定义线段连接点如何显示。可选的值包括：round（圆）、bevel（斜切）、miter（尖角）。默认值是 round。如果在示例中使用低透明度和很粗的线条，当靠的很近时就可以看出该属性的设置效果 WebGLRender不支持该属性
vertexColors	如果将这个属性设定为 THREE.VertexColors 值时，就可以为每一个顶点指定一种颜色
fog	此属性指定当前物体是否受全局雾化效果的影响
scale	缩放 dashSize 和 gapSize。如果 scale 小于 1，dashSize 和 gapSize 就会增大；反之，就会缩小
dashSize	定义虚线短划线的长度
gapSize	定义虚线短划线间隔的长度

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.LineDashedMaterial({
        vertexColors: true,
        color: 0xffffff,
        dashSize: 0.3,
        gapSize: 0.2,
        scale: 1
      })

      this.line = new THREE.Line(lines, material)
      this.line.position.set(25, -30, -60)
      this.line.computeLineDistances()
      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>