vue使用three.js实现外部加载模型的自动缩放的效果

效果图：

具体实现的步骤：

1、新建文件

在src中创建views文件夹，在views中创建scale文件夹。在scale中创建components文件夹和index.vue文件，最后在components创建ModelScale.vue文件。

2、BoxSwitch.vue文件中

（1）、加载需要的js文件

 import * as THREE from 'three'
 import * as dat from 'dat.gui'
 import {OrbitControls} from '@/components/loaders/OrbitControls'
 import {GLTFLoader} from '@/components/loaders/GLTFLoader.js'

（2）、文件框架

export default {
 	name:'ModelScale',
    data(){  // Vue实例的数据对象
        return{
           scene:null,
            camera:null,
            renderer:null,  
            cube:null,
            sphere:null,
            step:0,
            stats:null, 
            group:null     
        }
    },
    props:{  // 传递数据
        width:{type:Number}, 
        height:{type:Number},
        modelUrl:{type:String,default:'tree2.glb'}
        },
    methods:{ 定义 init();  loadModel(); 和 animate();}，
    mounted(){ // 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        this.init();
        this.animate(); 
        this.loadModel();  
}

（3）、init()方法

具体实现过程
a、定义一个Scene。
b、定义一个PerspectiveCamera。
c、定义一个WebGLRenderer渲染器。
d、定义一个包含AmbientLight和DirectionalLight的混合光。
e、定义一个O