Vue.js2+Cesium1.103.0 十、加載 Three.js

Demo

ThreeModel.vue

<template>
  <div
    id="three_container"
    class="three_container"
  />
</template>

<script>
/* eslint-disable eqeqeq */
/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
/* eslint-disable no-caller */
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
export default {
  name: 'ThreeModel',
  props: {},
  data() {
    return {
      modelMixer: null,
      modelClock: null,
      modelAnimationAction: null,
      modelAnimationAction2: null,
      model: null,
      scene: null,
      camera: null,
      renderer: null,
      textureLoader: null,
      groupBox: null,
      control: null,
      enableRotate: null
    }
  },
  computed: {},
  watch: {},
  mounted() {
    window.cancelAnimationFrame(this.clearAnim)
    this.init()
  },
  beforeDestroy() {
    window.cancelAnimationFrame(this.clearAnim)
  },
  methods: {
    async init() {
      const _this = this
      const element = document.getElementById('three_container')
      const width = element.clientWidth // 窗口寬度
      const height = element.clientHeight // 窗口高度
      // 場(chǎng)景
      this.scene = new THREE.Scene()
      // this.scene.background = new THREE.Color(0x000000, 0)
      this.scene.background = null

      // 相機(jī)
      const k = width / height // 窗口寬高比
      const s = 400 // 三維場(chǎng)景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
      // this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000) // 透視攝像機(jī)
      this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000) // 正交攝像機(jī)
      // 設(shè)置攝像機(jī)位置,相機(jī)方向逆X軸方向，傾斜向下看
      this.camera.position.set(0, 180, 360)
      // this.camera.rotation.order = 'YXZ'
      // 指向場(chǎng)景中心
      this.camera.lookAt(this.scene.position)

      // 渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      // 設(shè)置環(huán)境
      this.renderer.setClearColor(0x000000, 0)
      // 設(shè)置場(chǎng)景大小
      this.renderer.setSize(600, 600)
      // 渲染器開啟陰影效果
      this.renderer.shadowMap.enabled = true

      // 紋理加載器
      this.textureLoader = new THREE.TextureLoader()

      // 組合對(duì)象
      this.groupBox = new THREE.Group()

      // 坐標(biāo)軸
      // const axes = new THREE.AxesHelper(1000)
      // this.scene.add(axes)

      // 點(diǎn)光源
      const point = new THREE.PointLight(0xffffff)
      point.position.set(500, 300, 400) // 點(diǎn)光源位置
      this.scene.add(point) // 點(diǎn)光源添加到場(chǎng)景中

      // 環(huán)境光
      const ambient = new THREE.AmbientLight(0xffffff, 0.8)
      this.scene.add(ambient)

      element.appendChild(this.renderer.domElement)

      // 相機(jī)控件
      this.control = new OrbitControls(this.camera, this.renderer.domElement)
      this.control.enableDamping = true
      // 動(dòng)態(tài)阻尼系數(shù) 就是鼠標(biāo)拖拽旋轉(zhuǎn)靈敏度，阻尼越小越靈敏
      this.control.dampingFactor = 0.5
      // 是否可以縮放
      this.control.enableZoom = true
      // 是否自動(dòng)旋轉(zhuǎn)
      this.control.autoRotate = false
      // 設(shè)置相機(jī)距離原點(diǎn)的最近距離
      this.control.minDistance = 20
      // 設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離
      this.control.maxDistance = 1000
      // 是否開啟右鍵拖拽
      this.control.enablePan = true
      // 上下翻轉(zhuǎn)的最大角度
      this.control.maxPolarAngle = 1.5
      // 上下翻轉(zhuǎn)的最小角度
      this.control.minPolarAngle = 0.0
      // 是否可以旋轉(zhuǎn)
      this.enableRotate = true

      // 加載模型
      const loader = new GLTFLoader()
      await loader.load(
        'model/Cesium_Air.glb',
        gltf => {
          gltf.scene.name = 'Cesium_Air'
          gltf.scene.scale.set(20, 20, 20) //  設(shè)置模型大小縮放
          gltf.scene.position.set(0, 0, 0)
          gltf.scene.translateY(0)
          _this.modelMixer = new THREE.AnimationMixer(gltf.scene)
          _this.modelClock = new THREE.Clock()
          // http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/animation/AnimationAction
          _this.modelAnimationAction = _this.modelMixer.clipAction(
            gltf.animations[0]
          )
          _this.modelAnimationAction.timeScale = 1
          // _this.modelAnimationAction.loop = THREE.LoopOnce // 播放一次
          _this.modelAnimationAction.clampWhenFinished = true
          _this.modelAnimationAction2 = _this.modelMixer.clipAction(
            gltf.animations[1]
          )
          _this.modelAnimationAction2.timeScale = 1
          // _this.modelAnimationAction2.loop = THREE.LoopOnce // 播放一次
          _this.modelAnimationAction2.clampWhenFinished = true
          _this.scene.add(gltf.scene)
          _this.model = gltf.scene
        },
        _xhr => {
          // console.log((_xhr.loaded / _xhr.total) * 100 + '% loaded')
        },
        _error => {
          // console.error(_error)
        }
      )

      const animate = () => {
        // 循環(huán)調(diào)用函數(shù)
        this.clearAnim = requestAnimationFrame(animate)
        // 更新相機(jī)控件
        this.control.update()
        // 渲染界面
        this.renderer.render(this.scene, this.camera)
        if (this.modelMixer) {
          // modelClock.getDelta() 方法獲得兩幀的時(shí)間間隔
          // 更新混合器相關(guān)的時(shí)間
          this.modelMixer.update(this.modelClock.getDelta())
        }
      }
      animate()
    }
  }
}
</script>

<style lang="scss" scoped>
.three_container {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}
</style>

index.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-679753.html

<template>
  <div
    id="cesium-container"
    style="width: 100%; height: 100%;"
  >
    <div style="position: absolute;right: 50px;top: 100px;z-index: 9;">
      <div>
        <button @click="handlePlay('play')">播放動(dòng)畫</button>
        <button @click="handlePlay('reverse')">播放動(dòng)畫（反）</button>
        <button @click="handlePlay('paused')">暫停</button>
        <button @click="handlePlay('stop')">停止動(dòng)畫</button>
      </div>
      <div>
        <button @click="handlePlay2('play')">播放動(dòng)畫</button>
        <button @click="handlePlay2('stop')">停止動(dòng)畫</button>
      </div>
    </div>
    <ThreeModel ref="ThreeModel" />
  </div>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-caller */
/* eslint-disable eqeqeq */
import ThreeModel from './components/ThreeModel.vue'

export default {
  components: {
    ThreeModel
  },
  data() {
    return {
      paused: false
    }
  },
  computed: {},
  watch: {},
  mounted() {
    window.$InitMap()
  },
  methods: {
    handlePlay2(val) {
      if (val === 'play') {
        this.$refs.ThreeModel.modelAnimationAction2.play()
      } else if (val === 'stop') {
        this.$refs.ThreeModel.modelAnimationAction2.stop()
      }
    },
    handlePlay(val) {
      if (val === 'play') {
        this.$refs.ThreeModel.modelAnimationAction.paused = true
        this.$refs.ThreeModel.modelAnimationAction.timeScale = 1
        this.$refs.ThreeModel.modelAnimationAction.paused = false
        this.$refs.ThreeModel.modelAnimationAction.play()
      } else if (val === 'reverse') {
        this.$refs.ThreeModel.modelAnimationAction.paused = true
        this.$refs.ThreeModel.modelAnimationAction.timeScale = -1
        this.$refs.ThreeModel.modelAnimationAction.paused = false
        this.$refs.ThreeModel.modelAnimationAction.play()
      } else if (val === 'paused') {
        this.paused = !this.paused
        this.$refs.ThreeModel.modelAnimationAction.paused = this.paused
      } else if (val === 'stop') {
        this.$refs.ThreeModel.modelAnimationAction.stop()
      }
    }
  }
}
</script>

<style lang="scss">
.btns_container {
  position: absolute;
  z-index: 9;
  color: #fff;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  bottom: 100px;
  left: 0;
}
</style>

到了這里，關(guān)于Vue.js2+Cesium1.103.0 十、加載 Three.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！