在点的（CSS-transform）旋转之前计算坐标答案

【问题标题】：Calculate coordinates before (CSS-transform) rotation of point在点的（CSS-transform）旋转之前计算坐标
【发布时间】：2015-03-15 20:47:18
【问题描述】：

我想做的事： 将 3d 房间中三角形的坐标作为参数提供给 javascript 函数，它会计算该对象的 svg 路径和 css 转换角度。

我已经想通了：

要计算 3 个点之间的三角形，我只需要计算房间内所有 3 个边的长度。然后我就可以在 x-y 坐标系中绘制它（角度可以用 3 个边计算）
此外，我需要三角形必须旋转的角度才能达到我想要的结果
为此，我将三角形的一个点定义为变换(0|0|0) 的原点，稍后可以对其进行翻译。

但后来我失败了。我能够计算结果点Pr(x|y|z) 的 Z 角和 Y 角，平面上的原点 Po(x|0) x-y。我的想法是在 x 轴上“固定”一个三角形点，然后围绕 x 轴旋转……但无论如何 - 它不起作用。我以为 x 轴会先旋转，但事实并非如此。

所以我需要的是给定（结果）点/三角形的未知变换矩阵及其原点三角形，可以认为是给定的，其中生成的三角形位于三维房间，原点三角形在二维房间（svg 路径）中。

我真的不知道，我在 11 年级，所以我很难弄清楚。

非常感谢您的任何帮助！乔纳斯。

【问题讨论】：

标签： javascript css matrix transform euler-angles

【解决方案1】：

最后，经过几天无聊的课程，这是我的解决方案！

其实你可以决定先应用哪个 CSS 变换： rotateY(~deg) rotateX(~deg) 先绕 Y 轴旋转，然后绕 X 轴旋转。警告！坐标系的轴与您的对象一起旋转。

这里有一个动画来告诉你我的意思：ext. link。通常，您会期望 x 轴在 Y 轴和 Z 轴旋转后仍然在原位，但它会随对象/SVG 一起旋转。所以你正在围绕对象的轴旋转。

不需要变换矩阵： 最后，我计算了 Y 轴和 Z 轴旋转的角度，将第一个点 P1(x|y|z) 移动到 P1'(x|0|0)。现在通过简单的 X 旋转，我能够将第二个点的 z-value 设置为零。应用 X 轴旋转作为最后一个，P1 的坐标不会改变，因为它是固定在 x 轴上的。

这是我的最终代码。特意给你一个带调试日志的，这样你可能会更好理解。

$(document).ready(function() {
  calcTransf(80, 20, 40, 40, 100, 100);
});

function calcTransf(x1, y1, z1, x2, y2, z2) {

  $(".cube").append('<svg class="C_R0"><path fill="rgba(80, 204, 04, 0.5)" stroke-width="0" d="M0,0 L20,20 L20,0 Z"></path></svg>');
  $(".cube").append('<svg class="C_R1"><path fill="rgba(80, 204, 04, 0.5)" stroke-width="0" d="M0,0 L20,20 L20,0 Z"></path></svg>');
  $(".cube").append('<svg class="C_R2"><path fill="rgba(80, 204, 04, 0.5)" stroke-width="0" d="M0,0 L20,20 L20,0 Z"></path></svg>');
  $(".C_R0").css("transform", "translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)");
  $(".C_R1").css("transform", "translateX(" + x1 + "px) translateY(" + y1 + "px) translateZ(" + z1 + "px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)");
  $(".C_R2").css("transform", "translateX(" + x2 + "px) translateY(" + y2 + "px) translateZ(" + z2 + "px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)");

  var Yalpha = -Math.atan2(z1, x1);
  var LX = Math.sqrt(Math.pow(z1, 2) + Math.pow(x1, 2));

  x1 = LX;
  y1 = y1;
  z1 = 0;

  DEGYalpha = Yalpha / Math.PI * 180;
  console.log("Yalpha " + DEGYalpha);

  var Zalpha = Math.atan2(y1, x1);
  var LX = Math.sqrt(Math.pow(y1, 2) + Math.pow(x1, 2));

  x1 = LX;
  y1 = 0;
  z1 = 0;

  DEGZalpha = Zalpha / Math.PI * 180;
  console.log("Zalpha " + DEGZalpha);

  /* -----------------2. Punkt-------------------*/

  var x2Ay = x2 * Math.cos(Yalpha) - z2 * Math.sin(Yalpha);
  var z2Ay = z2 * Math.cos(Yalpha) + x2 * Math.sin(Yalpha);

  x2 = x2Ay;
  y2 = y2;
  z2 = z2Ay;

  console.log("Ay: " + x2 + " " + y2 + " " + z2);

  Zalpha = -Zalpha;
  var x2Az = x2 * Math.cos(Zalpha) - y2 * Math.sin(Zalpha);
  var y2Az = y2 * Math.cos(Zalpha) + x2 * Math.sin(Zalpha);

  x2 = x2Az;
  y2 = y2Az;
  z2 = z2;

  console.log("Az: " + x2 + " " + y2 + " " + z2);

  //Winkel z-y

  var Xalpha = Math.atan2(z2, y2);
  DEGXalpha = Xalpha / Math.PI * 180;
  console.log("Xalpha " + DEGXalpha);

  var z2Ax = z2 * Math.cos(Xalpha) - y2 * Math.sin(Xalpha);
  var y2Ax = y2 * Math.cos(Xalpha) + z2 * Math.sin(Xalpha);

  x2 = x2;
  y2 = y2Ax;
  z2 = z2Ax;

  console.log("Ax: " + x2 + " " + y2 + " " + z2);

  $(".cube").append('<svg class="C_RE"><path fill="rgba(80, 4, 4, 0.5)" stroke-width="0" d="M0,0 L' + x1 + ',0 L' + x2 + ',' + y2 + ' Z"></path></svg>');
  $(".C_RE").css("transform", 'translateX(0px) translateY(0px) translateZ(0px) rotateY(' + DEGYalpha + 'deg) rotateZ(' + DEGZalpha + 'deg) rotateX(' + DEGXalpha + 'deg)');

}

body {
	margin: 0; 
	height: 100%; 
	width: 100%;
	perspective: 500px;
}

.center {
	transform-style: preserve-3d;
	transform: translateX(50px) translateY(50px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.cube {
	transform-style: preserve-3d;
	transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

svg {
	transform-origin: left top;
	position: absolute;
	height: 150px;
	width: 150px;
}

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body style="height: 150px; width: 150px;">

  <div class="center" style="height: 50px; width: 50px;">
    <div class="cube" style="height: 50px; width: 50px;">

    </div>
  </div>

</body>

</html>

【讨论】：