我有一个盒子（collada文件），在three.js画布中加载。我可以像预期的那样与它交互。然而，盒子的大小会随着用户更改大小而发生变化。
当我将其载入500px x 500px的画布中时，如果盒子很大，用户必须放大才能看到它，如果它很小，它就很小，用户需要放大。大小取决于传递的变量。
我该如何让对象（collada文件）在加载时适应画布，然后让用户缩放？这是点击加载在three.js画布中显示3D对象的代码：
当我将其载入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。
