Question

我想做什么：给一个javascript函数将三维空间中三角形的坐标作为参数，并计算该对象的svg路径和css变换角度。

我已经想到了什么：

计算3点之间的三角形，我只需要计算它所有3个边的房间长度。然后我就可以在x-y坐标系中绘制它（角度可用3面计算）
此外，我需要三角形必须旋转的角度来实现我想要的结果
这样做，我将三角形的一个点定义为转换(0|0|0)的原点，稍后可以翻译它。

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

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

我真的没有线索，我在11年级，所以很难为我解决这个问题。

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

Answer 1

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

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

这是一个动画，向您展示我的意思：ext. link。通常，您可以预期在Y轴和Z轴旋转后x轴仍然存在，但它会随着Object / SVG旋转。所以你围绕物体的轴旋转。

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

所以这是我的最终代码。故意，我会给你一个调试日志，所以你可能更好地理解它。

P1

$(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;
}

计算坐标之前的坐标（CSS变换）

1 个答案: