Vue 使用three.js导入模型

最新推荐文章于 2025-06-10 13:25:39 发布

原创最新推荐文章于 2025-06-10 13:25:39 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍如何使用Three.js在WebGL中加载和渲染GLTF和JSON格式的3D模型，包括模型的颜色调整、相机控制及性能监测。通过具体代码示例，读者可以了解模型加载过程中的关键步骤和常见问题解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型文件要放在 static 或者 public 下，否则无法正常引入，引入的模型需要调整颜色，否则显示会有问题

<template>
  <div id="import-template">
  </div>
</template>

<script>
  import * as THREE from 'three'
  import * as Stats from 'stats.js'
  // import * as dat from 'dat.gui'
  import OrbitControls from 'three-orbitcontrols'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

  export default {
    name: 'ImportTemplate',
    data() {
      return {}
    },
    created() {
      this.init()
    },
    methods: {
      //初始化
      init() {
        //创建场景
        let scene = new THREE.Scene()

        //创建相机 - 视野、长宽比、近、远裁剪平面
        let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)
        camera.position.set(0, 0, 15)

        //创建渲染器 - 设置显示窗口大小
        let renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        //创建性能检测
        let stats = new Stats()
        stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild(stats.dom)

        //创建相机控件
        let control = new OrbitControls(camera, renderer.domElement)
        control.enableDamping = true
        control.dampingFactor = 0.25
        control.enableZoom = false

        this.importGLTF(scene, camera, renderer, stats, control)
        // this.importJSON(scene, camera, renderer, stats, control)
      },
      //导入GLTF格式模型
      importGLTF(scene, camera, renderer, stats, control) {
        //设置相机位置
        camera.position.z = 130
        camera.position.y = 80

        //创建GLTF加载器
        let loader = new GLTFLoader()

        // debugger
        loader.load('models/gltf/scene.gltf', gltf => {
          //缩放
          gltf.scene.scale.set(.1, .1, .1)

          //处理加载模型为黑色问题
          gltf.scene.traverse(child => {
            if (child.isMesh) {
              child.material.emissive = child.material.color
              child.material.emissiveMap = child.material.map
            }
          })

          scene.add(gltf.scene)
        }, xhr => {
          // called while loading is progressing
          console.log(`${( xhr.loaded / xhr.total * 100 )}% loaded`);
        }, error => {
          // called when loading has errors
          console.error('An error happened', error);
        })

        let animate = () => {
          //循环调用函数
          requestAnimationFrame(animate)

          //更新性能插件
          stats.update()

          //更新相机控件
          control.update()

          //渲染界面
          renderer.render(scene, camera)
        }
        animate()
      },
      //导入JSON格式模型
      importJSON(scene, camera, renderer, stats, control) {
        //设置相机位置
        camera.position.z = 130
        camera.position.y = 80

        let loader = new THREE.ObjectLoader()

        loader.load('models/json/file.json', group => {
          //处理加载模型为黑色问题
          group.traverse(child => {
            if (child.isMesh) {
              child.material.emissive = child.material.color
              child.material.emissiveMap = child.material.map
            }
          })

          scene.add(group)
        }, xhr => {
          // called while loading is progressing
          console.log(`${( xhr.loaded / xhr.total * 100 )}% loaded`);
        }, error => {
          // called when loading has errors
          console.error('An error happened', error);
        })

        let animate = () => {
          //循环调用函数
          requestAnimationFrame(animate)

          //更新性能插件
          stats.update()

          //更新相机控件
          control.update()

          //渲染界面
          renderer.render(scene, camera)
        }
        animate()
      }
    }
  }
</script>

<style scoped>
</style>