【发布时间】：2016-03-09 23:45:20
【问题描述】：
我有一个在 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();
更新：我已经评估了这里提供的解决方案：How to Fit Camera to Object，但我不确定如何为我的 collada 文件定义距离，因为它可能会根据用户输入的尺寸而有所不同。 collada 文件由用户向第三方供应商发送变量生成，该供应商返回一个 collada 文件，该文件随后被加载到 three.js。
更新 2： 感谢@Blindman67，我更接近于理解它们之间的相互作用。当我手动调高 camera.position x,y,z 值时，对象就在屏幕上。我面临的挑战是如何确定正确的 x、y、z 值，因为每个框都是动态变化的，我实际上有超过 2.8 亿种变化。我知道@Blindman67 已经在逻辑上给了我答案，但我只需要最后一步来发现如何为每次变化的对象获得正确的位置，以便我可以设置正确的 x、y、z。
【问题讨论】：
-
谢谢。我看了看，但我想我搜索的是错误的命名法。
-
仍然需要额外的帮助，因为我正在加载 collada 文件而不是创建几何形状，所以我不确定如何定位它所以它被放大了。
-
没关系，所有加载器都会创建一个Object3D，它会有一个几何属性
-
由于我只需要允许用户与对象进行交互，我应该使用不同的相机/透视与正交的优势是什么？