three.js一步一步来--如何画出构造辅助线

可以参考下面代码，粘贴上去就有了~

<template>

  <div class="container">

    <h1>初步构造出辅助线</h1>

    <canvas ref="mainCanvas"></canvas>

  </div>

</template>

<script>

import * as THREE from 'three'

const OrbitControls = require('three-orbit-controls')(THREE)

export default {

  props: {},

  data() {

    return {

      // 公共项目1

      scene: new THREE.Scene(),

      camera: null,

      renderer: new THREE.WebGLRenderer(), // 渲染器

      directionalLight: new THREE.DirectionalLight(0xff0000, 1.0, 0),

      controls: OrbitControls,

      cars: [],

      width: '',

      height: '',

      config: {

        isMobile: false,

        background: 0x282828

      }

      // 公共项目2

    }

  },

  computed: {},

  watch: {},

  created() {},

  mounted() {

    this.width = window.innerWidth

    this.height = window.innerHeight

    this.scene = new THREE.Scene()

    this.camera = new THREE.PerspectiveCamera(

      45, // 视野角fov

      this.width / this.height,

      1,

      5000

    )

    this.camera.position.set(330, 330, 330)

    this.camera.lookAt(this.scene.position)

    this.canvas = this.$refs.mainCanvas

    this.renderer = new THREE.WebGLRenderer({

      antialias: true, // antialias:true/false是否开启反锯齿

      canvas: this.canvas

    })

    this.renderer.setSize(this.width, this.height)

    this.renderer.setClearColor(this.config.background)

    this.renderer.shadowMap.enabled = true // 輔助線

    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap // 柔化边缘的软阴影映射

    this.checkUserAgent() // 检测浏览器类型

    this.bulidAuxSystem() // 构建辅助系统

    this.buildLightSystem() // 光线

    this.loop()

  },

  methods: {

    // 检测浏览器类型1

    checkUserAgent() {

      const n = navigator.userAgent

      if (

        n.match(/Android/i) ||

        n.match(/webOs/i) ||

        n.match(/iPhone/i) ||

        n.match(/iPad/i) ||

        n.match(/iPod/i) ||

        n.match(/BlackBerry/i)

      ) {

        this.config.isMobile = true

        this.camera.position.set(420, 420, 420)

        this.renderer.shadowMap.enabled = false // 輔助線

      }

    },

    // 检测浏览器类型2

    // 构建辅助系统1

    bulidAuxSystem() {

      const gridHelper = new THREE.GridHelper(320, 32)

      this.scene.add(gridHelper)

      this.controls = new OrbitControls(this.camera, this.renderer.domElement)

      this.controls.enableDamping = true

      this.controls.dampingFactor = 0.25

      this.controls.rotateSpeed = 0.35

    },

    // 构建辅助系统2

    buildLightSystem() {

      console.log('是否手机', this.config.isMobile)

      if (!this.config.isMobile) {

        console.log('是否手机11')

        this.directionalLight.position.set(300, 1000, 500)

        this.directionalLight.target.position.set(0, 0, 0)

        this.directionalLight.castShadow = true

        const d = 300

        this.directionalLight.shadow.camera = new THREE.OrthographicCamera(

          -d,

          d,

          d,

          -d,

          500,

          1600

        )

        this.directionalLight.shadow.bias = 0.0001

        this.directionalLight.shadow.mapSize.width = this.directionalLight.shadow.mapSize.height = 1024

        this.scene.add(this.directionalLight)

        const light = new THREE.AmbientLight(0xffffff, 0.3)

        this.scene.add(light)

      } else {

        console.log('是否手机22')

        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 1)

        this.scene.add(hemisphereLight)

        this.scene.add(new THREE.AmbientLight(0xffffff, 0.15))

      }

    },

    loop() {

      this.renderer.render(this.scene, this.camera)

      requestAnimationFrame(this.loop)

    }

  }

}

</script>

<style scoped lang="less">

</style>

three.js一步一步来--如何画出构造辅助线的相关教程结束。