obj转换为html,html – 将OBJ数据转换为CSS3D

我发现了大量的公式,但不是,但3D不是我的强项,所以我不知道具体使用什么.我的目标是将3D .obj文件(顶点,法线,面)中的数据转换为

CSS3D(宽度,高度,旋转X,Y,Z和/或类似变换).

例如2个简单的飞机

g plane1

# simple along along Z axis

v 0.0 0.0 0.0

v 0.0 0.0 1.0

v 0.0 1.0 1.0

v 0.0 1.0 0.0

g plane2

# plane rotated 90 degrees along Y-axis

v 0.0 0.0 0.0

v 0.0 1.0 0.0

v 1.0 1.0 0.0

v 1.0 0.0 0.0

f 1 2 3 4

f 5 6 7 8

这些数据可以转换为：

#plane1 {

width: X;

height: Y;

transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)

}

#plane2 {

width: X;

height: Y;

transform: rotateX(Xdeg) rotateY(Ydeg) rotateZ(Zdeg) translateZ(Zpx)

}

/* Or something equivalent such as transform: matrix3d() */

核心问题是如何从它的x,y,z坐标矩阵中获得4点平面的X / Y / Z旋转？

/*

-v 0.940148 -0.847439 -1.052535

-v 0.940148 -0.847439 0.947465

-v -1.059852 -0.847439 0.947465

-v -1.059852 -0.847439 -1.052535

-v 0.940148 1.152561 -1.052534

-v 0.940147 1.152561 0.947466

-v -1.059852 1.152561 0.947465

v -1.059852 1.152561 -1.052535

f 1 2 3 4

f 5 8 7 6

f 1 5 6 2

f 2 6 7 3

f 3 7 8 4

f 5 1 4 8

*/

var f = {

'm00' : 0.940148,

'm01' : -0.847439,

'm02' : -1.052535,

'm10' : 0.940148,

'm11' : -0.847439,

'm12' : 0.947465,

'm20' : -1.059852,

'm21' : -0.847439,

'm22' : 0.947465

}

// Assuming the angles are in radians.

if (f.m10 > 0.998) { // singularity at north pole

heading = Math.atan2(f.m02, f.m22);

attitude = Math.PI/2;

bank = 0;

} else if (f.m10 < -0.998) { // singularity at south pole

heading = Math.atan2(f.m02,f.m22);

attitude = -Math.PI/2;

bank = 0;

} else {

heading = Math.atan2(-f.m20, f.m00);

bank = Math.atan2(-f.m12, f.m11);

attitude = Math.asin(f.m10);

}

我得到了结果,但是我不确定我的计算是否正确,而且我也得到了与哪个轴相对应的混合响应.它是heading = y,bank = x和attitude = z？如果重要的话,我也会将每个转换成学位.