vue使用three.js并导入.obj模型

//下载three.js等依赖
npm install three.js

	//data下面定义的
     canvasDom: null,
     renderer: null,
     scene: null,
     camera: null,
     controls: null,

//在需要用到three.js模型渲染的界面导入
import * as THREE from 'three'
//three.js控制器引入
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

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

//初始化场景并将obj模型初始化
 initThree () {
      //创建场景
      this.scene = new THREE.Scene();
      //创建相机
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
      this.camera.position.set(0, 2, 6)
      //创建渲染器
      this.renderer = new THREE.WebGLRenderer({
        //抗锯齿
        antialias: true,
      })

      this.renderer.setSize(window.innerWidth / 3, window.innerHeight / 2)

      console.log(window.innerWidth / 3, window.innerHeight / 2, "这是用来测试three.js场景的宽高")


      console.log(this.renderer, 'biubiubiubiubiubibu')

      //把渲染器插入到dom中
      this.$refs.canvasDom.appendChild(this.renderer.domElement)

      //初始化渲染器，渲染背景
      this.renderer.setClearColor("#000");
      this.scene.background = new THREE.Color("#ccc");
      this.scene.environment = new THREE.Color("#ccc");

      this.render()

      //添加网格地面
      const gridHelper = new THREE.GridHelper(10, 10);
      gridHelper.material.opacity = 0.2;
      gridHelper.material.transparent = true;
      this.scene.add(gridHelper)

      //添加控制器

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


      const loader = new OBJLoader();

      loader.load("./model/test.obj", (gltf) => {
        console.log(gltf, "------我是3D的模型")
        this.scene.add(gltf)
      }, (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }, (error) => {
        console.log('An error happened');
      })

    },

    render () {
      this.renderer.render(this.scene, this.camera);
      this.controls && this.controls.update();
      requestAnimationFrame(this.render);
    }

//mounted的生命周期添加
 mounted () {
    //初始化three.js
    this.initThree()
  }

参考教程：https://www.bilibili.com/video/BV1Gg411X7FY?p=44&vd_source=4716b12357fe8e4b33b293b4bbbbfcd8