使用three.js我有以下内容.
给定正在查看的对象和摄像机位置,他们选择如何计算最终摄像机位置以"最佳地适应"屏幕上的对象？
如果在某些屏幕上"按原样"使用摄像机位置,则对象会在我的视口边缘流血,而其他位置则显得较小.我相信可以将物体安装到相机平截头体上,但却找不到合适的物体.
我是3D编程的新手,我开始用Three.JS从WebGL开始探索3D世界.
我想在更改camera.position.z和对象的"Z"位置时预先确定对象大小.
例如:我有一个大小为100x100x100的立方体网格.
cube = new THREE.Mesh(
new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),
new THREE.MeshFaceMaterial()
);
和纵横比为1.8311874的凸轮
camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 );
我想知道屏幕上多维数据集对象的大小(2D宽度和高度),
camera.position.z = 750;
cube.position.z = 500;
有没有办法找到它/预先确定它？
有没有办法找出场景渲染部分的宽度？
例如,如果我们有一个宽度为100的网格,但是使用一定级别的缩放进行渲染...如何计算在屏幕中渲染的网格部分的宽度？
有没有办法确定模型的大小和位置,然后自动居中和缩放模型,使其位于相机的原点和视图内？我发现当我从Sketchup导入Collada模型时,如果模型不在Sketchup中的原点居中,那么它不会以three.js为中心.虽然这是有道理的,但在导入后自动居中到原点会很不错.
我在不同的文件加载器中看到了一些关于获取导入模型边界的讨论,但是我一直无法找到任何关于如何做到这一点的参考.
缩放问题不太重要,但我觉得它与边界函数有关,这也是我问它的原因.
编辑:
玩了一下之后的更多信息和一些谷歌搜索...
加载collada文件时我的回调函数的代码现在看起来像这样:
loader.load(mURL, function colladaReady( collada ) {
dae = collada.scene;
skin = collada.skins[ 0 ];
dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();
//set arbitrary min and max for comparison
var minX = 100000;
var minY = 100000;
var minZ = 100000;
var maxX = 0;
var maxY = 0;
var maxZ = 0;
var geometries = collada.dae.geometries;
for(var propName in geometries){
if(geometries.hasOwnProperty(propName) && geometries[propName].mesh){
dae.geometry = geometries[propName].mesh.geometry3js;
dae.geometry.computeBoundingBox();
bBox = dae.geometry.boundingBox;
if(bBox.min.x < minX) …我正在构建一个应用程序,其中我呈现一些纹理的平面.但是,我想根据平截头体宽度和摄像机位置动态计算螺旋的半径(我在计算中用来创建螺旋).
螺旋位于屏幕的中心x = 0,y = 0,z = 0.
我想要考虑屏幕方向(横向/纵向).到目前为止这是我的代码,但似乎我错过了一些东西,因为左边和右边的平面不在视口内.
App.prototype.calculateHelixRadius = function(){
// plane width = height = 512;
var friend = this.getFriend();
var vFOV = friend.camera.fov * Math.PI / 180;
var dist = utils.getAbsPointsDistance3D(friend.camera.position, friend.scene.position);
var aspect = friend.settings.container.clientWidth / friend.settings.container.clientHeight;
var frustumHeight = 2.0 * dist * Math.tan(0.5 * vFOV);
var frustumWidth = frustumHeight * aspect;
return utils.isLandscape() ? frustumHeight / 2 : frustumWidth / 2 ;
};
我做错了什么,为什么屏幕边缘的飞机不在里面？
这里还有代码供参考 getAbsPointsDistance3D
var utils = {
// other helpers... …我有一个相机正在观看的CubeGeometry,我希望相机可以放大,这样立方体就完全可见,但不会更大.
我最初的尝试是将立方体顶点转换为摄像机坐标系,
function toScreenXY(position, camera) {
var pos = position.clone();
var projScreenMat = new THREE.Matrix4();
projScreenMat.multiply(camera.projectionMatrix, camera.matrixWorldInverse);
projScreenMat.multiplyVector3( pos );
return pos;
}
function ScaleInView() {
camera.fov = 0.0;
for (var i=0; i<8; i++) {
proj2d = toScreenXY(cube.geometry.vertices[i],camera);
angle = 57.296 * Math.max(Math.atan(proj2d.x/proj2d.z), Math.atan(proj2d.y/proj2d.z));
camera.fov = Math.max(camera.fov,angle);
}
camera.updateProjectionMatrix();
}
我认为这会起作用,但有时它太小了,有时候太大(取决于相机的位置).
我还需要为正射相机做这个.
编辑: 当立方体面向相机时,我知道如何做到这一点,当相机移动到某个任意(r,theta,phi)位置时,我正在寻找一种方法(球面极坐标; r实际上是为我的目的不变).