vue 使用 three.js 展示3D模型 gltf glb fbx

要在Vue项目中使用Three.js展示gltf模型，你需要按照以下步骤进行操作：

1、安装所需的依赖：在Vue项目的根目录下打开终端，并执行以下命令来安装Three.js和GLTFLoader库。

npm install three gltf-loader
npm install three fbx-loader

2、在需要展示模型的组件中导入所需的库。

import * as THREE from 'three'

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

3、创建模型公共名

const gltf_loader = new GLTFLoader()

const fbx_loader = new FBXLoader()

4、在组件的生命周期钩子函数中编写加载和展示gltf模型的代码。例如，在mounted钩子函数中加载并展示模型。

 mounted() {

    this.$nextTick(() => {

      this.init()

    })

  },

5、

初始化场景
 init() {

      // 创建场景和相机

      this.scene = new THREE.Scene()

      this.createLight() // 创建光源

      this.createLight() // 创建光源

      this.createCamera() // 创建相机

      this.createRender() // 创建渲染器

      this.createControls() //创建控制器

      this.render() // 渲染

      // 添加 resize 监听事件

      window.addEventListener('resize', this.onWindowResize, {

        passive: false

      })

      // 将 renderer.domElement 的 tabIndex 属性设置为 1

      this.renderer.domElement.tabIndex = 1

    },

6、

 // 创建光源

    createLight() {

      // 环境光

      const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光

      this.scene.add(ambientLight) // 将环境光添加到场景

    },

    // 创建相机

    createCamera() {

      const width = window.innerWidth // 窗口宽度

      const height = window.innerHeight // 窗口高度

      const k = width / height // 窗口宽高比

      // PerspectiveCamera( fov, aspect, near, far )

      this.camera = new THREE.PerspectiveCamera(20, k, 0.1, 1000)

      this.camera.position.set(-330, 10, 0) // 设置相机位置



      this.camera.lookAt(new THREE.Vector3(0, 30, 10)) // 设置相机方向

      this.scene.add(this.camera)

    },

    // 创建渲染器

    createRender() {

      const element = document.getElementById('container_uwb_Bim')



      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })

      this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染区域尺寸

      this.renderer.shadowMap.enabled = true // 显示阴影

      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap

      this.renderer.setClearColor(0xffffff, 0.1) // 设置背景颜色

      this.renderer.autoClear = false // 关闭自动清除

      this.renderer.sortObjects = false // 禁用对象排序

      this.renderer.state.setBlending(THREE.NormalBlending)



      element.appendChild(this.renderer.domElement)

    },



    render() {

      // if (this.mesh) {

      //   this.mesh.rotation.z += 0.006

      // }

      // 添加点击事件

      this.renderer.domElement.addEventListener('click', this.onMouseClick, {

        passive: false

      })

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

    },

    // 创建控件对象

    createControls() {

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

      this.controls.enableDamping = true // 启用阻尼效果，控制器会根据速度缓慢停止运动

      this.controls.dampingFactor = 0.25 // 阻尼系数，控制阻尼效果的强度

      this.controls.screenSpacePanning = false // 控制平移是否基于屏幕坐标而非场景坐标

      this.controls.minDistance = 1 // 最小缩放距离

      this.controls.maxDistance = 20000 // 最大缩放距离

    },


 animate() {

      // 更新 OrbitControls 控制器

      this.controls.update()



      // 渲染场景

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

      requestAnimationFrame(this.animate)

    },



    onWindowResize() {

      // 更新渲染器大小

      // 这部分代码用于更新相机的宽高比（aspect）和投影矩阵（projectionMatrix）。在 Three.js 中，相机使用投影矩阵来将三维场景中的坐标映射到二维屏幕上，而投影矩阵的计算需要使用相机的宽高比。因此在窗口尺寸发生变化时，需要更新相机的宽高比和投影矩阵。

      this.camera.aspect = window.innerWidth / window.innerHeight

      this.camera.updateProjectionMatrix()

      // 这部分代码用于更新渲染器的尺寸。Three.js 渲染器需要知道渲染区域的大小才能正确地渲染场景，因此在窗口尺寸发生变化时，需要更新渲染器的大小。

      this.renderer.setSize(window.innerWidth, window.innerHeight)

      // 这部分代码则是通过改变渲染器 DOM 元素的 CSS 样式来使其与窗口大小保持一致。由于渲染器默认使用 CSS position: absolute 定位，因此需要设置其左上角的坐标（left 和 top）为 0，以充满整个窗口。同时需要将渲染器 DOM 元素的宽高设置为与窗口一致，以使渲染器的尺寸保持不变。

      this.renderer.domElement.style.width = `${window.innerWidth}px`

      this.renderer.domElement.style.height = `${window.innerHeight}px`

      this.renderer.domElement.style.left = 0

      this.renderer.domElement.style.top = 0

    }

7、
现在可以来加载模型了 案例以gltf为例 其他格式同理

 // 加载模型的函数

    loadModelInit(url, callback) {

      // 检查模型是否已被缓存

      if (this.cache.models[url]) {

        callback(this.cache.models[url])

        return

      }



      // 如果模型未被缓存，则进行加载

      gltf_loader.load(

        url,

        (gltf) => {

          gltf.scene.traverse((child) => {

            if (child.isMesh) {

              // console.log(child.material)

              child.material.emissive = child.material.color

              child.material.emissiveMap = child.material.map

              child.material.transparent = true // 启用透明度

              child.material.opacity = 0.5 // 设置透明度为0.5（半透明）

            }

          })

          // 将模型存入缓存

          this.cache.models[url] = gltf.scene



          callback(gltf.scene)

        },

        undefined,

        (error) => {

          console.log('加载出错', error)

        }

      )

    },


  // 使用 GLTFLoader 加载 gltf 模型

    loadModel() {

      this.loadModelInit(this.uwbBim_url, (model) => {

        // 在回调函数中处理已加载的模型

        this.mesh = model

         this.scene.add(this.mesh)

        this.animate()

      })

    },