VUE+Three.js引用外部模型

最新推荐文章于 2025-02-28 14:16:54 发布

IDIOT?LIFE

最新推荐文章于 2025-02-28 14:16:54 发布

阅读量1k

点赞数 1

分类专栏： 3d 文章标签： javascript vue.js 前端 3d

本文链接：https://blog.youkuaiyun.com/qq_46079080/article/details/126954345

版权

3d 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Three.js加载和展示3D模型，并实现基本动画效果。通过安装three和three-orbitcontrols，设置环境光和方向光，配置透视相机，加载GLTF格式的3D模型，最终实现模型的渲染。

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

1，安装three 和 three-orbitcontrols

npm i -s three
npm i three-orbitcontrols

2，在public下面创建static放置模型文件

在这里插入图片描述文件目录

3，在页面引入three

import * as THREE from "three"; //引入Threejs
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; //模型加载器

4，初始化

 init() {
      let container = document.getElementById("container");//显示3D模型的容器
      this.scene = new THREE.Scene();
      this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
      this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      /**
       * 相机设置
       */

      this.camera = new THREE.PerspectiveCamera(
          70,
          container.clientWidth / container.clientHeight,
          0.01,
          10
      );
      this.camera.position.z = 1;
      /**
       * 创建渲染器对象
       */
      this.renderer = new THREE.WebGLRenderer({alpha: true});
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);

    },

5，加载模型以及动画

 loadGltf() {
      let self = this;
      let loader = new GLTFLoader();
      //本地模型路径：public/static/mod/Xbot.glb
      loader.load("static/mod/Xbot.glb", function (gltf) {
        self.isLoading = false;//关闭载入中效果
        self.mesh = gltf.scene;
        self.mesh.scale.set(0.3, 0.3, 0.3);//设置大小比例
        self.mesh.position.set(0, 0, 0);//设置位置
        self.scene.add(self.mesh); // 将模型引入three、
        self.animate();
      });
    },
    animate() {
      if (this.mesh) {
        requestAnimationFrame(this.animate);
        // this.mesh.rotation.y += 0.004;//绕Y轴旋转0.004°
        this.renderer.render(this.scene, this.camera);
      }
    },

完整代码

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

    </div>
  </div>
</template>

<script>
import * as THREE from "three"; //引入Threejs
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; //模型加载器


export default {
  name: 'ImportTemplate',
  data() {
    return {
      scene: null,
      light: null,
      camera: null,
      renderer: null,
      mesh: null,
      group: null
    }
  },
  mounted() {
    this.init()
    this.loadGltf()
  },

  methods: {
    init() {
      let container = document.getElementById("container");//显示3D模型的容器
      this.scene = new THREE.Scene();
      this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
      this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      /**
       * 相机设置
       */

      this.camera = new THREE.PerspectiveCamera(
          70,
          container.clientWidth / container.clientHeight,
          0.01,
          10
      );
      this.camera.position.z = 1;
      /**
       * 创建渲染器对象
       */
      this.renderer = new THREE.WebGLRenderer({alpha: true});
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);

    },
    loadGltf() {
      let self = this;
      let loader = new GLTFLoader();
      //本地模型路径：public/static/mod/Xbot.glb
      loader.load("static/mod/Xbot.glb", function (gltf) {
        self.isLoading = false;//关闭载入中效果
        self.mesh = gltf.scene;
        self.mesh.scale.set(0.3, 0.3, 0.3);//设置大小比例
        self.mesh.position.set(0, 0, 0);//设置位置
        self.scene.add(self.mesh); // 将模型引入three、
        self.animate();
      });
    },
    animate() {
      if (this.mesh) {
        requestAnimationFrame(this.animate);
        // this.mesh.rotation.y += 0.004;//绕Y轴旋转0.004°
        this.renderer.render(this.scene, this.camera);
      }
    },
  }
}
</script>

<style scoped>
#import-template {
  width: 1920px;
  height: 1080px;
}

#container {
  width: 500px;
  height: 500px;
  margin: 150px auto;
}
</style>