如何在虚拟现实( VR )图像上绘制三维点

Question

我试图理解从世界上的三维点(x，y，z)到2D图像上的虚拟表示的公式。

我用这个页面作为一个例子：

http://dynamic.pulselive.com/dynamic/client/espn/tennis/presets/

​

​

如何从球的实际(x，y，z)位置得到(a，b)位置？

如果您查看该页面，会发现许多有趣的信息：

• 该页面使用此3D库http://raphaeljs.com/。
• 球由(x，y,0)位置表示，如"VR摄像机1-4“视图： .setData({“名称”："PLAYER A“、”PLAYER B“、”set“)：0，0、"data":{"1.1.1":{ "serverIndex":0、"serveType":"f”、"servePlacement":{"x":0、"y":0}、"returnStrike":{"z":0.9144、“x”：0、"y":0}、“放置”：[ {"x":0，"y":0}，{"x":-6.4008，"y":0}，{"x":-11.8872，"y":5.4864}，{"x":-11.8872，"y":-5.4864}，{"x":11.8872，"y":5.4864}，{"x":11.8872，"y":-5.4864}，[]，“罢工”：[[]，[]}}} )；
• 网的中间似乎是(0，0，0)
• 在上面的例子中，四个球是： -11.8872，5.4864，0(网球双线上的球) 0，0，0(网中的球) 6.4008，0，0(T发球线上的球) -11.8872，-5.4864，0(另一条网球双线上的球)
• 文件projection.js具有以下内容： onProjections({“sp”：{“高度”：290，“宽度”：288，"y":1.57271656153463，"p":-2.37960648536682，"tx":44.8464085506826，"ty":0.072299872443644，"tz":43.6183372879028，"r":0.0，"ar":1.0，"fl":1876.41418457031，"cx":144，"cy":145}，“rsp”：{“高度”：290，“宽度”：288，"y":1.56934654388598，"p":-2.26160676579457，"tx":32.6921108381257，"ty":0.227987701481753，"tz":19.2898811340332，"r":0.0，"ar":1.0，"fl":557.320129394531，"cx":144，"cy":145}，“p”：{“高度”：290，“宽度”：288，"y":1.57234654402847，“p”：2.01060693582986，"tx":40.2668354447684，"ty":0.0886826017731878，"tz":15.4698811340333，"r":0.0，"ar":1.0，"fl":1027.31091308594，"cx":144，"cy":145}，“vr-4”：{“高度”：290，“宽度”：578，"y":-3.14002369728572，"p":-3.14159274101257，"tx":0.0720691962205988，"ty":-0.237841598739008，"tz":144.869881134034，"r":0.0，"ar":1.0，"fl":1735.24694824219，"cx":289，"cy":145}，“vr-3”：{“高度”：290，“宽度”：578，"y":3.13971663596315，"p":-1.80660665035248，"tx":-0.0380399327222413，"ty":21.4384628442103，"tz":8.04833728790282，“r”：144.869881134034，“y”：3.13971663596315，“p”：-1.80660665035248，“tx”：-0.0380399327222413，“ty”：21.4384628442103，“tz”：8.04833728790282，"r":0.0，"ar":1.0，"fl":333.111877441406，“tx”：289，"cy":145}，“vr-2”：{“高度”：290，“宽度”：578，"y":2.14571658875068，"p":-1.86560642719269，"tx":27.0765197103578，"ty":16.2179742216193，"tz":10.4983372879028，"r":0.0，"ar":1.0，"fl":445.122161865234，"cx":289，"cy":145}，“vr-1”：{“高度”：290，“宽度”：578，"y":1.56571656120214，"p":-1.88360643386841，"tx":37.1591340096487，"ty":-0.0542132391350438，"tz":10.9683372879027，"r":0.0，"ar":1.0，"fl":787.308471679688，"cx":289，"cy":145}，“rhp”：{“高度”：290，“宽度”：288，"y":1.57134654398098，"p":-2.25760674476624，"tx":31.4921270358275，"ty":0.153327426083581，"tz":18.0298811340332，"r":0.0，"ar":1.0，"fl":557.320129394531，"cx":144，"cy":145 } )；

我认为我的问题归结为如何使用projection.js中的数据从(x，y，z)位置计算(a，b)位置？请注意，我正在尝试获取公式，而且我对javascript库不太感兴趣，因为我需要使用不同的工具来实现。

编辑#1:

视图数据似乎包括:高度、宽度、y(偏航)、p (pan)、tx、ty、tz (摄像机位置)、r(卷)、ar (？？，总是1)、fl (焦距？？)、cx、cy (以图像为中心？)。

此页给出了一个公式，但不包括偏航：

2d.htm

    procedure 3Dto2D (x, y, z, pan, centre, position)

    x = x + position.x
    y = y + position.y
    z = z + position.z

    new.x = x*cos(pan.x) - z*sin(pan.x)
    new.z = x*sin(pan.x) + z*cos(pan.x)
    new.y = y*cos(pan.y) - new.z*sin(pan.y)
    z = new.y*cos(pan.y) - new.z*sin(pan.y)
    x = new.x*cos(pan.z) - new.y*sin(pan.z)
    y = new.x*sin(pan.z) + new.y*cos(pan.z)

    if z > 0 then
        screen.x = x / z * zoom + centre.x
        screen.y = y / z * zoom + centre.y
    end if

如果我考虑虚拟现实相机2的网球双线球，我有以下信息：

REAL WORLD POSITION (from html source)
X:  -11.8872
Y:  -5.4864
Y:  0.0

VR CAMERA 2 INFORMATION (from javascript projection.js)
height: 290
width:  578
y:  2.14571658875068
p:  -1.86560642719269
tx: 27.0765197103578
ty: 16.2179742216193
tz: 10.4983372879028
r:  0.0
ar: 1.0
fl: 445.122161865234
cx: 289
cy: 145

2D LOCATION (from live inspection of page in browser inspector)
A:  121.9715646498276
B:  193.3313740587937

函数(A，B) = f(X，y，Z，高度，宽度，Y，p，tx，ty，tz，r，ar，fl，cx，cy)是什么？

Answer 1

偏航计算如下：

x_new = x * cos (yaw) - y * sin (yaw)
y_new = x * sin (yaw) + y * cos (yaw)

http://thundaxsoftware.blogspot.fi/2012/01/projecting-3d-points-to-2d-screen.html?m=1