from How to position the camera so that the object always has the same pixel width and height on the screen?

in your case is more likely dependent on the smaller window size axis !!!

  • because aspect ratio equations usually differs
  • for width > height and width < height
  • most renders have taken this behaviour from OpenGL
  • so may be your code needs adding one if to be complete :)
  • to be sure just resize your window to be bigger in height then width and see what happens

btw. the math behind is just simple triangle math

  • one angle = 90 deg
  • second is atan (h1/z1) = atan (h0/z0)

    1. h1/z1 = h0/z0 <- triangle similarity
    2. z1 = z0*h1/h0 <- this is what you want
  • h0 is your half size in control axis (x or y)

  • h1 is half cube size
  • z0 is near plane of your frustrum
  • z1 is cube position (do not forget to add the offset to center of cube)
  • so cube center position is: z1' = (z0*h1/h0)+h1

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

http://stackoverflow.com/questions/15331358/three-js-get-object-size-with-respect-to-camera-and-object-position-on-screen

I am newbie to 3D programming, I did started to explore the 3D world from WebGL with Three.JS.

I want to predetermine object size while i change the camera.position.z and object "Z" position.

For example: i have a cube mesh at size of 100x100x100.

  1. cube = new THREE.Mesh(
  2. new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),
  3. new THREE.MeshFaceMaterial()
  4. );

and cam with aspect ratio of 1.8311874

  1. camera = new THREE.PerspectiveCamera( 45, aspect_ration, 1, 30000 );

I want to know size (2D width & height) of that cube object on screen when,

  1. camera.position.z = 750;
  2. cube.position.z = 500;

Is there is any way to find/predetermine it?

You can compute the visible height for a given distance from the camera using the formulas explained in Three.js - Width of view.

  1. var vFOV = camera.fov * Math.PI / 180; // convert vertical fov to radians
  2. var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

In your case the camera FOV is 45 degrees, so

  1. vFOV = PI/4.

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

The distance from the camera to the front face (important!) of the cube is 750 - 500 - 50 = 200. Therefore, the visible height in your case is

  1. height = 2 * tan( PI/8 ) * 200 = 165.69.

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is

  1. fraction = 100 / 165.69 = 0.60.

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.

如何定位摄像机,使物体在屏幕上始终具有相同的像素宽度和高度?(threes)的更多相关文章

  1. 3d世界是怎样呈现到屏幕上的

    要把一个3d物体呈现在屏幕上,要经过一系列的步骤. 描述3d世界 把3d世界绘制在二维屏幕上 如何描述一个3D世界? 数学家早就给出了3D世界的模型,我们日常最熟悉的3维坐标系就是一个欧几里得空间(线 ...

  2. IOS 特定于设备的开发:使用加速器启动屏幕上的对象

    借助一点编程工作,iPhone的机载加速计就可以使对象在屏幕上四处“移动”,实时响应用户倾斜手机的方式.下面的代码就是创建一个动画式的蝴蝶,用户可以使之快速移过屏幕. 使之工作的秘密在于:向程序中添加 ...

  3. [Xcode 实际操作]一、博主领进门-(2)第一个工程项目:将导入的图片显示到屏幕上

    目录:[Swift]Xcode实际操作 本文将演示创建第一个工程项目. 在项目导航区,鼠标右键[Assets.xcassets]资源文件夹. 隔壁右侧区域左下角点击[+],打开资源文件管理菜单-> ...

  4. 【Unity笔记】使物体(船)漂浮在水面上——浮力

    在官方论坛看到一个关于怎么使物体漂浮在水面上的讨论:https://forum.unity3d.com/threads/floating-a-object-on-water.31671/ 水动力系统 ...

  5. 【opengl】OpenGL中三维物体显示在二维屏幕上显示的变换过程

    转自:http://blog.sina.com.cn/s/blog_957b9fdb0100zesv.html 为了说明在三维物体到二维图象之间,需要经过什么样的变换,我们引入了相机(Camera)模 ...

  6. IOS UIView 01-View开始深入 绘制像素到屏幕上

    注:本人是翻译过来,并且加上本人的一点见解. 前言 一个像素是如何绘制到屏幕上去的?有很多种方式将一些东西映射到显示屏上,他们需要调用不同的框架.许多功能和方法的结合体.这里我们大概的看一下屏幕之后发 ...

  7. Unity3D之如何创建正确的像素比在屏幕上

    关于这篇文章的命名,实在不知道怎么命名好,大概功能就是:比如一张宽高为100x100的图片显示在屏幕上,那2D摄像头的Size值为多少时,屏幕上显示出来图片大小和图片的实际像素一致. 这里涉及到一个G ...

  8. UE4中如何使物体始终朝向摄像头?

    要使物体始终正面朝向摄像头需要用到一个关键节点:Find Look at Rotation 其中Start连接需要旋转的物体位置矢量,Target连接摄像头位置矢量 最后设置SetActorRotat ...

  9. iphone怎么投屏到电脑屏幕上

    随着苹果手机的更显换代,苹果手机的功能越来越强大,其中iphone手机更新了airplay镜像功能,所以想要手机投屏电脑的小伙伴就更加方便了,但是iphone怎么投屏到电脑呢?大家不用着急,下面即将为 ...

随机推荐

  1. jsp:和属性相关的方法,请求的转发,重定向

    jsp中与属性相关的方法: 方法: void setAttribute(String name, Object o): 设置属性 Object getAttribute(String name):获取 ...

  2. Oracle导出的sql执行出错

    建的表如果有constraint的话sql语句中会有create unique index...而在前面的建表语句中,这个index实际上已经建好了. 所以导出的sql语句,应该将后面的create ...

  3. openmp在图像处理上面的运用

    // openmptest的测试程序 //   #include "stdafx.h"   void Test(int n){     for (int i=0;i<1000 ...

  4. 《python核心编程》读书笔记--第15章 正则表达式

    15.1引言与动机 处理文本和数据是一件大事.正则表达式(RE)为高级文本匹配模式,为搜索-替换等功能提供了基础.RE是由一些字符和特殊符号组成的字符串,它们描述了这些字符和字符串的某种重复方式,因此 ...

  5. C#字符串题目

    老师给小学生门布置了一些作业,让它们按照一个模版写一些字符串交上来,同学们把作业交上来了,问题来了,这么多的作业老师批改不过来,现在请你帮老师写一个程序,帮助老师确定各个字符串是否合格.首先老师有一个 ...

  6. 测可用!ecshop立即购买和加入购物车按钮共存的方法

    网上方法很多,但都不能用的,有的是老版本的,有的方法本身就不完整. 应大多数客户要求,我们重新整理下教程,希望对大家有用. 亲测可用!ecshop立即购买和加入购物车按钮共存的方法 第一步:修改ecs ...

  7. VC如何让窗口半透明

    转载:http://blog.csdn.net/bichenggui/article/details/8291946 //加入WS_EX_LAYERED扩展属性 LONG styleValue = : ...

  8. IOS Bug分析

    异常代码是SIGABRT.通常,  SIGABRT 异常是由于某个对象接收到未实现的消息引起的. 或者,用简单的话说,在某个对象上调用了不存在的方法. iOS应用崩溃日志分析 分析iOS Crash文 ...

  9. OLTP基准测试脚本

    关键语句:ll /local/sysbenchtest/sysbench-0.5/sysbench/tests/db--查看lua脚本/usr/local/mysql/bin/mysql -u roo ...

  10. BZOJ 1449 球队收益(最小费用最大流)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1449 题意: 思路:首先,我们假设后面的M场比赛两方都是输的,即初始时的lose[i]再 ...