第十讲：html5中canvas实现正方体的动态旋转

最新推荐文章于 2022-11-07 10:34:00 发布

我有一个小毛驴

最新推荐文章于 2022-11-07 10:34:00 发布

阅读量3.9k

点赞数

分类专栏： javascript html+css 文章标签： html5 canvas画3D图形 html5画3D图形正方体旋转 html5正方体旋转

本文链接：https://blog.csdn.net/liumingm_music/article/details/30101809

版权

本文介绍如何在HTML5的canvas上绘制三维正方体并使其围绕轴线动态旋转。通过定义Vector3对象，设置观察点和显示屏，计算二维坐标，连接直线，以及实现旋转算法来完成这一过程。

摘要由CSDN通过智能技术生成

在html5的画布上，画出三维图形，并且实现它动态的围着一条轴进行旋转。

实现步骤：

1、定义一个对象Vector3，用于存储三维的坐标

2、定义一个观察点坐标和显示屏，初始化观察点的显示屏的距离(主要通过他们计算出各个点在二维平面的坐标值)

3、定义八个点(为了方便计算，我将会是画布和坐标进行i平移和旋转)

4、通过一定的公式，计算出八个点显示在平面的坐标(x,y)

5、使用moveTo和lineTo连接所有的直线

6、定义进行旋转的方法(难点，主要使用三维立体计算出各个点的推导公式)

7、最后进行旋转


<html>
	<head>
		<title>3D图形(3D旋转)</title>
		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
		<style type="text/css">
			body{margin: 0 0 0 0;padding: 0 0 0 0;}
		</style>
	</head>
	
	<body>
		<canvas id="mc" width="600px" height="600px" style="background-color: #111;">
		</canvas>
		<script type="text/javascript">
			//定义一个三维矢量类
			Vector3