初始加载时，在Three.JS Canvas中适合3D对象（Collada文件）

我有一个可在three.js画布中加载的框（collada文件）。我可以按预期与之互动。但是，由于用户可以更改尺寸，包装盒的尺寸会有所不同。

当我将其加载到500px x 500px的画布中时，如果该框很大，则用户必须先放大才能看到它；如果它很小，则用户需要放大。该框的大小取决于变量通过了。

如何在加载时使对象（collada文件）适合画布，然后让用户缩放？这是单击加载的代码，以在three.js画布中显示3D对象：

$scope.generate3D = function () {

        // 3D OBJECT - Variables
        var texture0 = baseBlobURL + 'Texture_0.png';
        var boxDAE = baseBlobURL + 'Box.dae';
        var scene;
        var camera;
        var renderer;
        var box;
        var controls;
        var newtexture;

        // Update texture
        newtexture = THREE.ImageUtils.loadTexture(texture0);

        // Initial call to render scene, from this point, Orbit Controls render the scene per the event listener
        THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
            // console.log( item, loaded, total ); // debug
            if (loaded === total) render();
        };

        //Instantiate a Collada loader
        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load(boxDAE, function (collada) {
            box = collada.scene;
            box.traverse(function (child) {
                if (child instanceof THREE.SkinnedMesh) {
                    var animation = new THREE.Animation(child, child.geometry.animation);
                    animation.play();
                }
            });
            box.scale.x = box.scale.y = box.scale.z = .2;
            box.updateMatrix();
            init();
        });

        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xdddddd);

            //renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setSize(500, 500);

            // Load the box file
            scene.add(box);

            // Lighting
            var light = new THREE.AmbientLight();
            scene.add(light);

            // Camera
            camera.position.x = 40;
            camera.position.y = 40;
            camera.position.z = 40;

            camera.lookAt(scene.position);

            // Rotation Controls
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.addEventListener('change', render);
            controls.rotateSpeed = 5.0;
            controls.zoomSpeed = 5;
            controls.noZoom = false;
            controls.noPan = false;

            // Add 3D rendering to HTML5 DOM element
            var myEl = angular.element(document.querySelector('#webGL-container'));
            myEl.append(renderer.domElement);

        }

        // Render scene
        function render() {
            renderer.render(scene, camera);
            console.log('loaded');
        }
    }

    // Initial 3D Preview Load
    $scope.generate3D();

更新：我已经评估了此处介绍的解决方案：如何使相机适合对象，但是不确定如何为我的collada文件定义距离，因为它可以根据用户输入的尺寸而有所不同。collada文件是由用户发送变量给第三方供应商生成的，该第三方供应商返回一个collada文件，该文件随后被加载到three.js中。

更新2：感谢@ Blindman67，我将更进一步了解这种相互作用。当我手动设置camera.position的x，y，z值时，该对象在屏幕上。我面临的挑战是如何随着每个框的动态变化确定正确的x，y，z值，而字面上的变化超过2.8亿。我知道@ Blindman67已经在逻辑上给了我答案，但是我只需要最后推动一下，以发现如何为每次变化的对象获得正确的位置，以便我可以设置正确的x，y，z。