vue使用threeJs导入obj和mtl

Joviaaa

已于 2022-02-08 11:22:45 修改

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

于 2022-02-08 11:19:15 首次发布

本文链接：https://blog.csdn.net/MrJovia/article/details/122820039

版权

本文介绍了如何在Vue.js项目中使用Three.js库来导入和显示OBJ与MTL文件。首先，通过安装three.js库开始，然后在Vue组件中引入并编写代码实现模型加载。在实施过程中遇到的错误，可以参照给出的解决方法进行修复。

摘要由CSDN通过智能技术生成

参考文章：https://blog.csdn.net/weixin_44601948/article/details/108502580
参考网站：http://www.webgl3d.cn/Three.js/

1. 安装three

npm i three
npm i three-obj-mtl-loader
npm i orbitcontrols

2. 引用

import * as THREE from "three";
import {
    OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import OrbitControls from "three-orbitcontrols";

3. 代码

 init() {
   
      let that = this;
      this.windowHalfX = window.innerWidth / 2;
      this.windowHalfY = window.innerHeight / 2;

      let divs = document.createElement("div");
      this.container = document.querySelector(".Modal");
      this.container.appendChild(divs);
      // 场景
      this.scene = new THREE.Scene();
      // 相机
      this.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight