vue使用three.js实现外部加载模型的自动缩放的效果（进一步优化）

一、vue使用three.js加载外部模型自适应渲染区域大小

1、实现效果

当在http://localhost:8080/#/scale?name=tree2.glb 中name参数中输入不同名字的.glb模型时，都可以自动进行缩放来适用所定义页面的大小。

但需要注意的是：模型需要为.glb格式。若不是glb格式，可以通过blender软件进行导入后再导出为glb格式。

2、实现思路

（1）定义一个Scene、PerspectiveCamera、WebGLRenderer以及包含AmbientLight和DirectionalLight的混合光。

（2）设置渲染区域大小：this.renderer.setSize(this.width,this.height);

（3）加载外部模型。使用GLTFLoader加载器加载获取到的外部的.glb模型，并把mesh放在group组中，对group进行操作。

（4）因为模型是不规则的，为了更好的计算模型的大小，我们引入了Box3。使用THREE.Box3().setFromObject(group)计算gruop的包围盒的大小，并放group在原点位置。然后根据公式计算得到3d模型对应的画布上group的大小(2D宽度和高度)。

计算过程：

// 计算相机到物体正面的距离。
let dist =Math.abs(self.camera.position.z - group.position.z- (mdwid/2));

// 将垂直fov转换为弧度 。
let vFov = self.camera.fov * Math.PI/180;

// 可见高度。
let vheight = 2 * Math.tan(vFov * 0.5) *dist;

// 可见高度的分数。
let fraction = mdhei / vheight;

// 立方体的高度(以像素为单位)是画布的高度(以像素为单位)的fraction倍。
let finalHeight = self.height * fraction ; 

// 包围盒计算的高/finalHeight = 包围盒计算的宽/finalWidth 。   
let finalWidth = (finalHeight*mdlen) /mdhei;  

（5）通过该2D宽度和高度分别与设置的渲染区域的宽和高相比得到两个不同的缩放比例value1和value1。选取两者较小的值，设置为group的缩放比例。

    let value1 = self.width/finalWidth;
    console.log('value1缩放比例值为:' + value1);
    let value2 = self.height/finalHeight;
    console.log('value2缩放比例值为:' + value2);

    if(value1 >= value2){
        group.scale.set(value2,value2,value2);
    }
    else{
        group.scale.set(value1,value1,value1);
    } 

（6）再一次使用使用THREE.Box3().setFromObject(group)计算gruop的包围盒的大小（这个是缩放后的group