three.js 导入模型，解决渲染容器固定后模型会被拉伸的问题

 

init(){  // 这里只写出部分关键代码，具体的效果还需要自行参照官方文档实现
            // 创建场景对象
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.set(2, 1, 8);
            camera.lookAt(scene.position);

            // 容器
            var demobox = document.getElementById("demo")
            // 渲染
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColor(0x0785FD)
            //设置canvas画布的大小为容器宽高
            renderer.setSize( demobox.clientWidth, demobox.clientHeight );  
}
animate(){
            requestAnimationFrame( this.animate );
            
            // 防止模型被拉伸变形
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
            
            renderer.render(scene, camera); // 渲染场景中的模型
        },

拓展：

new THREE.PerspectiveCamera 构造函数用来创建透视投影相机，该构造函数总共有四个参数，分别是fov，aspect，near，far 。fov表示摄像机视锥体垂直视野角度，最小值为0，最大值为180，默认值为50，实际项目中一般都定义45，因为45最接近人正常睁眼角度；aspect表示摄像机视锥体长宽比，默认长宽比为1，即表示看到的是正方形，实际项目中使用的是屏幕的宽高比；near表示摄像机视锥体近端面，这个值默认为0.1，实际项目中都会设置为1；far表示摄像机视锥体远端面，默认为2000，这个值可以是无限的，说的简单点就是我们视觉所能看到的最远距离。

除了上述四个基本属性之外，透视投影相机六个属性，分别是：filmGauge，filmOffset，focus，isPerspectiveCamera，view，zoom。这几个参数在实际应用中很少用到，基本都保持默认值。如果想了解各属性的意义及完成的功能可以通过官方文档去了解。