Loading.vue

<template>
  <div id="loading">
    <canvas id="fbxload" style="width: 100%; height: 100%"> </canvas>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// threejs引入
export default {
  name: 'Loading',
  data () {
    return {
      msg: 'fbxloading'
    }
  },
  methods: {
    loadingFbx: function () {
      const scene = new THREE.Scene()
      const width = window.innerWidth
      const height = window.innerHeight
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 100)
      const canvas = document.querySelector('#fbxload') // 根据canvas的id获取dom节点
      console.log(canvas)
      const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) // 渲染场景
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = true
      controls.update()
      camera.position.z = 5
      //   const geometry = new THREE.BoxGeometry();
      //   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      //   const cube = new THREE.Mesh(geometry, material);
      const light = new THREE.AmbientLight(0x0000ff) // 蓝色环境环境光
      scene.add(light)
      //   scene.add(cube);
      const gltfLoader = new GLTFLoader()
      gltfLoader.load(
        '/static/utils/fx_background/model/glb/snow.glb',
        function (gltf) {
          console.log(gltf)
          scene.add(gltf.scene)
        },
        undefined,
        function (error) {
          console.error(error)
        }
      )

      function animate () {
        // 渲染
        renderer.render(scene, camera)
        requestAnimationFrame(animate)
      }
      animate()
    }
  },
  created () {
    window.onload = this.loadingFbx // dom加载完再执行
  }
}
</script>

<style scoped>
#loading {
  width: 100%;
  height: 100%;
  line-height: 1em;
}
#fbxload {
  width: 100%;
  height: 100%;
}
</style>