java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体

摘要：Canvas画布是一个二维平面，如何展示出3D效果？通过将三维空间中的Z轴抽取出来，将图像的点投影到与Z轴垂直的平面上，在通过旋转等变换效果，我们就能实现3D效果。

一、建立坐标系

1)立方体坐标系

我们以立方体的几何中心作为原点，如图建立坐标系。

2)canvas坐标系

canvas坐标系主要用于显示3维平面在浏览器中的投影(就像一束光照射在立方体上，在墙面出现的阴影)。三维坐标系的层次在顶层，canvas坐标系在底层。

二、立方体旋转

我们将Y轴抽取出来之后，图像对于屏幕前的我们，主要是围绕Z轴和X轴所处平面的轴在旋转，当我们的鼠标移动时，移动的XY距离可以换算成旋转的角度。立方体在空间中的旋转，我们只需要旋转他的8个顶点，移动后将每个面连起来，就完成了立方体的移动。

PS：这里涉及到了旋转矩阵的知识，不明白的同学可以搜索一下旋转矩阵，有详细的解释，本文不再阐述。

1)绕X轴移动

鼠标向下移动时，我们将移动的距离换算为角度θ，利用旋转矩阵，我们将顶点的矢量与旋转矩阵相乘，即可得到旋转后的点。

2)绕z轴移动

鼠标向下移动时，我们将移动的距离换算为角度β，继续以上操作。

3)XOZ平面上的其他轴

当鼠标斜着移动时，我们可以将其分解为两个方向的移动，在三维空间中也是一样，将图像分解为先绕X轴移动θ角，在绕Y轴移动β角。

这样我们就可以获得相应的移动公式。

三、立方体投影

当旋转完毕之后，就需要将旋转后的图像投影到二维平面。直接将Y轴的值去掉，将X轴的值设置为canvas平面的X值，将Z轴的值设置为canvas平面的-Y值。

四、代码实现

下载项目后可查看效果，请使用高版本浏览器查看。

https://github.com/sincw/sinwProject/tree/master/webContent/src/main/webapp/work/cube

效果：

java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体相关推荐

Canvas实现3D效果-可旋转的立方体
摘要:Canvas画布是一个二维平面,如何展示出3D效果?通过将三维空间中的Z轴抽取出来,将图像的点投影到与Z轴垂直的平面上,在通过旋转等变换效果,我们就能实现3D效果. 一.建立坐标系 1)立方体坐 ...
JAVA三维可视化组件：Matplot 3D for JAVA(V2.0) 发布欢迎使用JAVA平台类似 Python 的 matplotlib
目录概述 V3.0介绍 V4.0介绍组件下载及项目地址: V2.0版本主要改进: 概述本人独立研发的一款JAVA平台可视化组件:Matplot3D for JAVA(V2.0) .基于JAVA ...
java 三维旋转立方体_iOS-从三维立方体到理解CATransform3DCGAffineTransformm34
前言在写Custom Layout的demo时,用到了CATransform3D的m34参数,不务正业的想探究下这个矩阵到底为什么能影响到图形的透视旋转等等变换,所以通过本篇文章总结一下收获,供以后 ...
java 三维旋转立方体_【转】 CATransform3D 矩阵变换之立方体旋转实现细节
原文网址:http://blog.csdn.net/ch_soft/article/details/7351896 第一部分.前几天做动画,使用到了CATransform3D ,由于没有学过计算机图形 ...
java 三维旋转立方体_java - 如何通过旋转来计算立方体的所有方向，而不重复方向？ - SO中文参考 - www.soinside.com...
我正在研究一个应用程序,以找到给定特定起始结构的拼图立方体的可能解决方案的数量. 我将所有唯一的解决方案存储在内存中,将与给定结构进行比较,以确定可能有多少解决方案. 为此,我必须围绕每个面将立方体旋 ...
JAVA三维可视化组件：Matplot 3D for JAVA(V3.0) 一个纯JAVA开发的科学数据可视化组件包类似 Python 的matplotlib（含示例代码）
目录概述组件下载及项目地址效果展示和示例代码概述 Matplot3D for JAVA(V3.0) 是一个基于JAVA SE 1.8环境开发的三维图形图表组件. 组件由纯JAVA SE 实现( ...
html3d轮播图片效果,CSS3,3D效果轮播图
---恢复内遇新是直朋能到分览支体调容开始--- 大家还的候通现端数是制这.效合应近环大过这业据记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮在重说 ...
HTML 3D效果+形变动态（球体、立方体、螺旋体、层次模型）
以下是我完成的三个3D模型(内有分析和源代码) 主要是使用: -webkit-perspective:1000px;/透视距/ transform-style: preserve-3d;/指定嵌套元素 ...
OpenCV中的姿势估计及3D效果（3D坐标轴，3D立方体）绘制
OpenCV中的姿势估计及3D效果(3D坐标轴,3D立方体)绘制 1. 效果图 2. 原理 3. 源码 3.1 姿态估计后绘制3D坐标轴 3.2 姿态估计后绘制立方体参考这篇博客将延续上一篇博客: ...

java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体

java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体相关推荐

最新文章

热门文章