vue中用three.js渲染gltf模型

安装three.js

npm install three --save

或者

yarn add three

此处使用的版本
“three”: “^0.154.0”,
“vue”: “^3.2.33”,

页面引入

import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
var scene=null;
var camera=null;
var renderer=null;
var controls=null;

modelInitFun(){
        let _w="容器宽度";
        let _h="容器高度";
        //场景
        scene=new THREE.Scene();
        //相机
        camera=new THREE.PerspectiveCamera(75,_w/_h,0.1,5000);
        camera.position.z=50.602655301093874;
        camera.position.x=7.390108868949435;
        camera.position.y=50.123625707396773;
        //渲染器
        renderer=new THREE.WebGLRenderer({antialias:true});
        renderer.setClearColor('#f2f2f2');
        renderer.setSize(_w,_h);
        renderer.setAnimationLoop(this.render)
       //定向光源
        const directionalLight = new THREE.DirectionalLight(0xffffff, 10);
        directionalLight.position.set(10, 50, 80); // 设置光源位置
        scene.add(directionalLight);
		//添加坐标辅助
        scene.add(new THREE.AxesHelper(1000));

        let canvas=document.querySelector('.siteInspection');
        canvas.appendChild(renderer.domElement);
        controls=new OrbitControls(camera,renderer.domElement);
        controls.addEventListener('change',()=>{
          // console.log(camera.position)
          renderer.render(scene,camera)
        })

        // 创建DRACOLoader实例
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('node_modules/three/examples/jsm/libs/draco/gltf/');//依赖包中Draco解码器的路径
        const loaderG = new GLTFLoader();
        loaderG.setDRACOLoader(dracoLoader);
        loaderG.load( '../static/2_1/2_1Floor.gltf', async function ( gltf ) {
          const model = gltf.scene;
          await renderer.compileAsync( model, camera, scene );
          scene.add(model);
        } );



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