vue threejs

最近要写个vue 的3d展示效果，由于布局问题拾取3d物体不准确，

参考 https://blog.csdn.net/hard_reward/article/details/107859968

 

 

 

 

<template>
  <div id="webgl" ref="webgl" class="webgl_style" />
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'

export default {
  data() {
    return {
      renderer: '', // 渲染器
      scene: '', // 场景
      camera: '', // 相机
      controls: '', // 控制器
      composer: '', // outlineSelect
      effectFXAA: '', // outlineSelect
      outlinePass: '', // outlineSelect
      selectedObjects: [], // outlineSelect
      raycaster: new THREE.Raycaster(),

      stats: '', // 性能监控器
      mygroup: '', // 模型组
      action: '', // 控制动画的值
      clock: '', // 时钟
      mixer: '', // 混合实例
      rotateAnimate: '', // 旋转动画
      isRotate: 1, // 是否开启旋转
      mesh: null,
      pointer: new THREE.Vector2(),
      INTERSECTED: null

    }
  },
  mounted() {
    this.init()
    this.animate()
  },
  methods: {
    init() {
      this.initScene()// 初始化场景
      this.initCamera()// 初始化相机
      this.initLight()// 初始化光线
      this.Panel() // 地面

      this.initRenender()// 初始化渲染器
      this.outlineSelect() // 模型选择
      this.ininControl() // 初始化控制
      this.$refs.webgl.addEventListener('mousemove', this.onWindowResize) //
      this.$refs.webgl.addEventListener('mousemove', this.launchHover) //
    },
    // 初始化场景
    initScene() {
      this.scene = new THREE.Scene()// 创建场景
      // this.scene.background = new THREE.Color(0xcce0ff)
      this.scene.fog = new THREE.Fog(this.scene.background, 1, 5000)
    },
    // 初始化相机
    initCamera() {
      this.camera = new THREE.PerspectiveCamera(50, document.getElementById('webgl').clientWidth / document.getElementById('webgl').clientHeight, 0.1, 5000)// 创建相机对象
      this.camera.position.set(20, 60, 150)// 设置相机位置
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向(指向的场景对象)
    },

    // 初始化光线
    initLight() {
      // LIGHTS HemisphereLight
      const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.4)
      hemiLight.color.setHSL(0.6, 1, 0.6)
      hemiLight.groundColor.setHSL(0.095, 1, 0.75)
      hemiLight.position.set(0, 50, 0)
      this.scene.add(hemiLight) // 光线加入场景中

      const hemiLightHelper = new THREE.HemisphereLightHelper(hemiLight, 10)
      this.scene.add(hemiLightHelper)

      // LIGHTS DirectionalLight

      const dirLight = new THREE.DirectionalLight(0xffffff, 1)
      dirLight.color.setHSL(0.1, 1, 0.95)
      dirLight.position.set(-1, 1.75, 1)
      dirLight.position.multiplyScalar(30)
      this.scene.add(dirLight) // 光线加入场景中

      dirLight.castShadow = true

      dirLight.shadow.mapSize.width = 2048
      dirLight.shadow.mapSize.height = 2048

      const d = 50

      dirLight.shadow.camera.left = -d
      dirLight.shadow.camera.right = d
      dirLight.shadow.camera.top = d
      dirLight.shadow.camera.bottom = -d

      dirLight.shadow.camera.far = 15000
      dirLight.shadow.bias = -0.0001

      const dirLightHelper = new THREE.DirectionalLightHelper(dirLight, 10)
      this.scene.add(dirLightHelper)
    },
    // 控制
    ininControl() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)// 创建控件对象
      this.controls.minDistance = 5
      this.controls.maxDistance = 220
      this.controls.maxPolarAngle = Math.PI * 0.4 // 最大角度 地平面与camera
      this.controls.enablePan = true
      this.controls.enableDamping = true
      this.controls.dampingFactor = 0.05
    },

    // 初始化渲染器 ——指定容器
    initRenender() {
      this.renderer = new THREE.WebGLRenderer() // 创建渲染器
      this.renderer.shadowMap.enabled = true // 倒影阴影贴图
      this.renderer.setClearColor(0xb9d3ff, 1) // 设置背景颜色
      this.renderer.setPixelRatio(window.devicePixelRatio) // 接口返回当前显示设备 的物理像素分辨率与CSS 像素分辨率 //高清
      this.renderer.setSize(document.getElementById('webgl').clientWidth, document.getElementById('webgl').clientHeight)
      this.$refs.webgl.appendChild(this.renderer.domElement)
    },
    // 定义窗口的设置
    onWindowResize() {
      const container = document.getElementById('webgl')
      this.camera.aspect = container.clientWidth / container.clientHeight
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      this.camera.updateProjectionMatrix()
      this.effectFXAA.uniforms[ 'resolution' ].value.set(1 / container.clientWidth, 1 / container.clientHeight)
    },
    // 地面
    Panel() {
      // 在平面上创建栅格覆盖
      var grid = new THREE.GridHelper(175, 20, 0xffffff, 0xffffff)
      grid.material.opacity = 0.5
      grid.material.transparent = true
      grid.position.y = 0.005
      this.scene.add(grid)

      // 创建Threejs平面
      const blockPlane = new THREE.Mesh(
        new THREE.BoxBufferGeometry(),
        new THREE.MeshPhongMaterial({
          color: 0xffffff,
          transparent: true,
          opacity: 0.25
        })
      )
      const pos = { x: 0, y: -0.25, z: 0 }
      const scale = { x: 175, y: 0.5, z: 175 }
      blockPlane.position.set(pos.x, pos.y, pos.z)
      blockPlane.scale.set(scale.x, scale.y, scale.z)
      blockPlane.receiveShadow = true
      blockPlane.name = '地板'
      this.scene.add(blockPlane)
    },
    outlineSelect() {
      this.composer = new EffectComposer(this.renderer)

      const renderPass = new RenderPass(this.scene, this.camera)
      this.composer.addPass(renderPass)
      const container = document.getElementById('webgl')
      this.outlinePass = new OutlinePass(new THREE.Vector2(container.clientWidth, container.clientHeight), this.scene, this.camera)

      this.outlinePass.edgeStrength = Number(5)// 边缘长度
      this.outlinePass.edgeThickness = Number(3.6)// 边缘厚度 值越小越明显
      this.outlinePass.pulsePeriod = Number(2.9) // 一闪一闪周期
      this.outlinePass.visibleEdgeColor.set('#ffff00')// 没有被遮挡的outline的颜色
      this.outlinePass.hiddenEdgeColor.set(0xff0000)// 被遮挡的outline的颜色
      this.composer.addPass(this.outlinePass)

      this.effectFXAA = new ShaderPass(FXAAShader)
      this.effectFXAA.uniforms['resolution'].value.set(
        1 / window.innerWidth,
        1 / window.innerHeight
      )
      this.composer.addPass(this.effectFXAA)
      this.renderer.domElement.style.touchAction = 'none' // CSSStyleDeclaration
      this.$refs.webgl.addEventListener('pointermove', this.onPointerMove)
    },
    onPointerMove(event) {
      if (event.isPrimary === false) return

      var mouse = new THREE.Vector2()
      const container = document.getElementById('webgl')
      const getBoundingClientRect = container.getBoundingClientRect() // 获取元素位置 确定三维坐标
      mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1
      mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1

      this.raycaster.setFromCamera(mouse, this.camera)

      const intersects = this.raycaster.intersectObject(this.scene, true)

      if (intersects.length > 0) {
        const selectedObject = intersects[0].object
        this.addSelectedObject(selectedObject)
        this.outlinePass.selectedObjects = this.selectedObjects
      } else {
        this.outlinePass.selectedObjects = []
      }
    },
    addSelectedObject(object) {
      this.selectedObjects = []
      this.selectedObjects.push(object)
    },

    launchHover(event) {
      event.preventDefault()
      var mouse = new THREE.Vector2()
      const container = document.getElementById('webgl')
      const getBoundingClientRect = container.getBoundingClientRect() // 获取元素位置 确定三维坐标
      mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1
      mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1
      var raycaster = new THREE.Raycaster()
      raycaster.setFromCamera(mouse, this.camera)
      var intersects = raycaster.intersectObjects([this.scene], true)
      if (intersects.length > 0) {
        document.querySelector('body').style.cursor = 'pointer'
      } else {
        document.querySelector('body').style.cursor = 'default'
      }
    },
    // 动画
    animate() {
      this.controls.update() // Update controls
      this.renderer.render(this.scene, this.camera)// Render 渲染
      this.composer.render()
      requestAnimationFrame(this.animate) // Call tick again on the next frame
    }

  }
}
</script>

<style>
.webgl_style{
 position: absolute;
 width: 100%;
 height: calc(100vh - 84px); /* 高度减去 面包屑-撑满 */
}
</style>