import {
  Cache,
  WebGLRenderer,
  ACESFilmicToneMapping,
  PCFSoftShadowMap,
  sRGBEncoding,
  PerspectiveCamera,
  Scene,
  Color
} from 'three'
// 二維標(biāo)簽渲染器
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import Stats from 'three/examples/jsm/libs/stats.module.js'

_initRenderer () {
    // 獲取畫布dom
    this.viewerDom = document.getElementById(this.id)
    // 初始化渲染器
    this.renderer = new WebGLRenderer({
      logarithmicDepthBuffer: true,
      antialias: true, // true/false表示是否開(kāi)啟反鋸齒
      alpha: true, // true/false 表示是否可以設(shè)置背景色透明
      precision: 'highp', // highp/mediump/lowp 表示著色精度選擇
      premultipliedAlpha: true, // true/false 表示是否可以設(shè)置像素深度（用來(lái)度量圖像的分辨率）
      preserveDrawingBuffer: true // true/false 表示是否保存繪圖緩沖
    })
    this.renderer.domElement.style.zIndex = 1
    // 默認(rèn)情況下，js的光強(qiáng)數(shù)值不真實(shí)。為了使得光強(qiáng)更趨于真實(shí)值，應(yīng)該把渲染器的physicallyCorrectLights屬性設(shè)為true
    this.renderer.physicallyCorrectLights = true
    // 盡管我們的貼圖不是HDR，但使用tone mapping可以塑造更真實(shí)的效果。
    this.renderer.toneMapping = ACESFilmicToneMapping 
    // 場(chǎng)景中的陰影自動(dòng)更新
    this.renderer.shadowMap.enabled = true 
    // 設(shè)置渲染器開(kāi)啟陰影貼圖，并將類型設(shè)為PCFSoftShadowMap
    this.renderer.shadowMap.type = PCFSoftShadowMap 
    // 這下我們可以看到更亮的材質(zhì)，同時(shí)這也影響到環(huán)境貼圖。
    this.renderer.outputEncoding = sRGBEncoding
    // 一個(gè)canvas，渲染器在其上繪制輸出。
    this.viewerDom.appendChild(this.renderer.domElement)
    // 網(wǎng)頁(yè)標(biāo)簽
    this.labelRenderer = new CSS2DRenderer()
    this.labelRenderer.domElement.style.zIndex = 2
    this.labelRenderer.domElement.style.position = 'absolute'
    this.labelRenderer.domElement.style.top = '0px'
    this.labelRenderer.domElement.style.left = '0px'
    // 避免HTML標(biāo)簽遮擋三維場(chǎng)景的鼠標(biāo)事件
    this.labelRenderer.domElement.style.pointerEvents = 'none'
    this.viewerDom.appendChild(this.labelRenderer.domElement)
    // 三維標(biāo)簽
    this.css3DRenderer = new CSS3DRenderer()
    this.css3DRenderer.domElement.style.zIndex = 0
    this.css3DRenderer.domElement.style.position = 'absolute'
    this.css3DRenderer.domElement.style.top = '0px'
    this.css3DRenderer.domElement.style.left = '0px'
    // 避免HTML標(biāo)簽遮擋三維場(chǎng)景的鼠標(biāo)事件
    this.css3DRenderer.domElement.style.pointerEvents = 'none'
    this.viewerDom.appendChild(this.css3DRenderer.domElement)
  }

  _initCamera () {
    // 渲染相機(jī)
    this.camera = new PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 5000)
    this.camera.position.set(50, 0, 50)
    this.camera.lookAt(0, 0, 0)
  }

  _initScene () {
    // 渲染場(chǎng)景
    this.scene = new Scene()
    this.scene.background = new Color('rgb(5,24,38)')
  }

  _initControl (option) {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    this.controls.enableDamping = false
    this.controls.maxPolarAngle = Math.PI * 0.46// 垂直軌道多遠(yuǎn) 上限
    this.controls.minPolarAngle = Math.PI * 0.3// 你可以垂直軌道多遠(yuǎn)，下限
    this.controls.screenSpacePanning = false // 定義平移時(shí)如何平移相機(jī)的位置 控制不上下移動(dòng)
  }

  // 全局光不需要
  const ambientLight = new DS.THREE.AmbientLight(0xffffff, 0.2)
  viewer.scene.add(ambientLight)

  function animate () {
      requestAnimationFrame(animate)
      that._undateDom()
      that._readerDom()
      // 全局的公共動(dòng)畫函數(shù)，添加函數(shù)可同步執(zhí)行
      that.animateEventList.forEach(event => {
        event.fun && event.content && event.fun(event.content)
      })
    }
    animate()
  // 更新dom大小
  _undateDom () {
    const that = this
    that.controls.update()
    // 攝像機(jī)視錐體的長(zhǎng)寬比，通常是使用畫布的寬/畫布的高，所以這里的畫布指的是dom，就是一個(gè)div，而不是window
    that.camera.aspect = that.viewerDom.clientWidth / that.viewerDom.clientHeight 
    // 更新攝像機(jī)投影矩陣。在任何參數(shù)被改變以后必須被調(diào)用,來(lái)使得這些改變生效
    that.camera.updateProjectionMatrix() 
    //設(shè)置渲染器的長(zhǎng)寬比，所以就不需要在代碼里面去寫window的頁(yè)面監(jiān)聽(tīng)，來(lái)改變頁(yè)面大小【】
    that.renderer.setSize(that.viewerDom.clientWidth, that.viewerDom.clientHeight)
    //that.renderer.setPixelRatio(window.devicePixelRatio) // 設(shè)置設(shè)備像素比
    that.labelRenderer.setSize(that.viewerDom.clientWidth, that.viewerDom.clientHeight)
    that.css3DRenderer.setSize(that.viewerDom.clientWidth, that.viewerDom.clientHeight)
  }
  // 渲染dom
  _readerDom () {
    this.renderer.render(this.scene, this.camera)
    this.labelRenderer.render(this.scene, this.camera)
    this.css3DRenderer.render(this.css3dScene, this.camera)
  }

  //動(dòng)畫函數(shù)數(shù)組
  this.animateEventList = []

  /**
   * 添加全局的動(dòng)畫事件
   * @param animate 函數(shù)加參數(shù)對(duì)象
   * 傳入對(duì)象 = {
            fun: 函數(shù)名稱,
            content: 函數(shù)參數(shù)
        }
   */
  addAnimate (animate) {
    this.animateEventList.push(animate)
  }

  /**
   * 狀態(tài)更新
   * @param statsControls
   */
  _statsUpdate (statsControls) {
    statsControls.update()
  }

  /**
   * 添加狀態(tài)監(jiān)測(cè)
   */
  addStats () {
    if (!this.statsControls) this.statsControls = new Stats()
    this.statsControls.dom.style.position = 'absolute'
    this.viewerDom.appendChild(this.statsControls.dom)
    // 添加到動(dòng)畫
    this.statsUpdateObject = {
      fun: this._statsUpdate, // 函數(shù)名稱，函數(shù)在上面
      content: this.statsControls // 綁定傳入的參數(shù)
    }
    this.addAnimate(this.statsUpdateObject)
  }

  /**
   * 移除全局的動(dòng)畫事件
   * @param animate 函數(shù)加參數(shù)對(duì)象
   * 傳入對(duì)象 = {
            fun: 函數(shù)名稱,
            content: 函數(shù)參數(shù)
        }
   */
  removeAnimate (animate) {
    this.animateEventList.map((val, i) => {
      if (val === animate) this.animateEventList.splice(i, 1)
    })
  }

  /**
   * 移除狀態(tài)檢測(cè)
   */
  removeStats () {
    if (this.statsControls) this.viewerDom.removeChild(this.statsControls.dom)
    // 添加到動(dòng)畫
    this.statsUpdateObject = {
      fun: this._statsUpdate,
      content: this.statsControls
    }
    this.removeAnimate(this.statsUpdateObject)
  }

  beforeDestroy () {
    this.scene.traverse((child) => {
      if (child.material) {
        child.material.dispose()
      }
      if (child.geometry) {
        child.geometry.dispose()
      }
      child = null
    })
    this.renderer.forceContextLoss()
    this.renderer.dispose()
    this.scene.clear()
  }