Stack Overflow на русском Asked by Angry Fox on November 7, 2021
Есть плоскость Р1 на вращающейся в 3D плоскости Р2. Изначально углы поворота Р2: x2=0, y2=0, z2=0 и обе плоскости отображаются лицом к наблюдателю. Если не менять угол поворота у Р1, то она вращается вместе с Р2.
Как вычислять углы поворота x1, y1, z1 для Р1 чтобы она была как в начальный момент времени (всегда лицом к наблюдателю).
<script>
var p2 = document.querySelector('i');
var p1 = document.querySelector('u');
var x2=0, y2=0, z2=0; // значения угла поворота p2 или элемент i
var x1 = Math.cos(x0); // нужна правильная формула
var y1 = Math.cos(y0); // нужна правильная формула
var z1 = Math.cos(z0); // нужна правильная формула
p2.style.transform = 'rotateX('+x0+'deg) rotateY('+y0+'deg) rotateZ('+z0+'deg)';
p1.style.transform = 'rotateX('+x1+'deg) rotateY('+y1+'deg) rotateZ('+z1+'deg)';
</script>body, i{
transform-style: preserve-3d;
}
i {
width: 100px;
height: 100px;
display: block;
background: #0f0;
position:absolute;
}
u {
width: 50px;
height: 50px;
display: block;
background: #00f;
position:absolute;
transform-origin: bottom center;
}<i><u></u></i>На примере, я вращаю зеленый блок (плоскость), а синяя должна быть повернута так, что визуально всегда остаётся "неподвижной" к наблюдателю.
Оказалось всё намного проще: нужно было выполнить поворот с отрицательными значениями родительского объекта и в обратном порядке:
var x1 = -x2;
var y1 = -y2;
var z1 = -z2;
p2.style.transform = 'rotateX('+x2+'deg) rotateY('+y2+'deg) rotateZ('+z2+'deg)';
p1.style.transform = 'rotateZ('+z1+'deg) rotateY('+y1+'deg) rotateX('+x1+'deg)';
Answered by Angry Fox on November 7, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP