zoukankan      html  css  js  c++  java
  • 在threejs中对3D物体旋转的思考

    今天在写threejs时,突然想到一个问题:一个3D物体需要旋转时,一般情况下简单的旋转我都是使用欧拉角,稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转(欧拉角复杂旋转可能会产生的死锁问题),但是在threejs中object3D的旋转方法无论是使用setRotation(沿着x、y、z轴旋转)还是rotateOnAxis(按从原点到任意方向的向量进行旋转)都无法完成沿着一个不经过原点的轴进行旋转(或者是我没有发现),但是实际应用的情况是存在的,比如一个大箱子,再某种情况下我们需要他沿着y轴旋转,另一种情况,我们又需要他沿着它的底边翻转(相当于一个大箱子放在地上,人去推他把它翻了个个)。

    (灵魂画风,中间那个点就是物体的原点,箭头是物体的旋转轴)

            在opengles中,这种解决情况十分简单,我们只需要先保存这时的矩阵状态,然后向下移动世界坐标系,当世界坐标系的z轴和箱子的底边重合时进行旋转,旋转完成之后恢复之前保存矩阵即可。在u3d中也可以轻易地使用方法,设置一个轴的起点和终点让某个物体沿着这个轴旋转。

            在threejs中没有这个方法,于是我想到了一种办法,先创建一个object相当于一个大的容器,然后把box执行翻箱子动作的旋转轴放到object的z轴上,然后把box添加为object的子类,当需要box沿y轴旋转时,转动box的y轴box.setRotationY(x);当需要翻箱子时则选中box的父类object的z轴object.setRotationZ(x);由于box是object的子类,当父类移动时,子类也会跟着移动,就像一个小盒子被粘在了一个大盒子内部一样,这样就实现了让box沿不经过原点的任意轴旋转。

    (大概就是这么个意思~不会用win10的画板-- --)

            其实这个技巧是巧妙的利用了子类和父类的关系,大家有什么更好的方法,可以告诉我~

            最后发现这个网站,更加直观地说明了这个问题:https://jsfiddle.net/b4wqxkjn/5/

  • 相关阅读:
    转载 | float 清除浮动的7种方法
    转载 | CSS图片下面产生间隙的 6种解决方案
    (转载)内联元素设置宽高问题
    HTML/CSS:display:flex 布局教程
    HTML/CSS:block,inline和inline-block概念和区别
    上传文件
    分页查询 模糊查询 合体查询
    repeater的command用法
    窗体内的控制 跨窗体控制
    webform 跨窗体传值
  • 原文地址:https://www.cnblogs.com/lst619247/p/9143301.html
Copyright © 2011-2022 走看看