在threejs中对3D物体旋转的思考

news/2024/11/28 19:01:18/

        今天在写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/



http://www.ppmy.cn/news/249770.html

相关文章

Unity 偏振3D左右格式画面制作

两个Camera相距6cm左右,分别渲染到两个1024*1024的RenderTexture上,然后在GUI上分别绘制出来。 using UnityEngine; using System.Collections;public class UI3D : MonoBehaviour {public RenderTexture texCamLeft;public RenderTexture texCamRight;R…

unity--3D物体的上下左右移动,鼠标控制大小,旋转

这次文章主要是看了网上写的很多关于物体上下左右位移,鼠标控制物体的大小,旋转问题,但是下载很多,依然没有自己想要的结果,就自己根据前辈经验,在上面稍加修改,简直就是班门弄斧了。方便自己&a…

3D变形:平移、旋转、缩放

什么是3d转换 定义元素在三维空间移动、缩放、旋转 3d坐标轴(图示) 3D立体空间的3根轴线 x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 z轴:垂直于屏幕&a…

2D和3D转换

转换(transform) transform 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放。 要想学好2D和3D转换要先对 坐标 有一定了解 2D 2维坐标系 2D转换中的 属性 在使用转换是我们要先给元素添加转换属性 transform(x,y)&…

3D视觉 之 线激光3D相机

3D视觉 之 线激光3D相机 飞鸢逐浪 专注于机器视觉、OpenCV、C编程 84 人赞同了该文章 1 3D 视觉 常见的三维视觉技术,包含双目、ToF、激光三角、结构光等,如下图: 1)毫米级 双目、ToF、结构光(散斑)的精度为 mm 级&#xff0…

2D转3D

(本文部分内容摘选自http://www.cnblogs.com/ImageVision/archive/2012/03/26/2418602.html,http://www.guokr.com/article/145897/) 第一,我们先看看所谓的3D和2D最大的区别是什么呢?没错,就是图片的深度…

3D照片旋转

前言 第一次写不知道写些啥,大学四年(PS:计算机专业),本人菜鸟是真的菜。 一、3D照片旋转 1、首先创建一个新的文件夹,再在里面创建一个新的文件来保存照片,然后我是参照该博主的https://blo…

3D到2D的转换方式

import SimpleITK as sitk import numpy as np import cv2 import os import glob import tqdmdef nifti2png(path):for file in tqdm.tqdm(glob.glob(os.path.join(path, "*"))): # *表示通配符,即path下面的所有文件都遍历一遍image sitk.ReadImage(f…