你现在可能已经意识到了HTML5是改变游戏规则。特别是HTML5画布在美国，HTML5 3D JavaScript引擎如three.js发布，以增强基本的2D HTML5 API。毕竟，3D图形比2D图形酷多了，对吧?
公平地说，如果您要创建一个完整的3D引擎(包括三维矩阵转换、点对象、平面对象、阴影、光线跟踪和其他空间计算)，这将是相当困难的。但是如果我们想要创建一个支持转换和旋转的优化的、基本的3D JavaScript引擎呢?会有多难?
如果我告诉你，我们可以创建我们自己的简单的3D JavaScript引擎40行代码？本指南将提供一个简单而直接的JavaScript引擎，使HTML5 3D渲染可以用于网页动画，游戏等。
了解3D投影
在创建我们自己的3D引擎之前，我们应该首先了解3D空间的幻觉是如何在2D屏幕上创建的。这些错觉被称为3 d的预测。3D投影将点映射到二维平面上。
在我们的例子中，三维点定义了我们希望渲染的对象，二维平面是计算机屏幕。如下图所示，我们可以通过绘制三个不规则的四边形(顶部、左侧和前面的四边形)在二维平面上创建立方体的三维投影。
平面投影与椭圆
不幸的是，计算三维投影的代码可能相当复杂。我们如何简化它?想象一下俯视一个旋转的矩形平面。
它的四个角位于一个正圆的轮廓上，圆的半径等于矩形对角距离的一半。现在想象一下，如果我们在3D空间中倾斜这个平面。会发生什么呢?
这个假想的圆突然变成了一个高小于宽的椭圆。这意味着我们可以通过创建角位于椭圆边缘的平面来创建一个简单的3D投影。如果我们用一个角度来定义平面的旋转，θ，三维投影计算顿时变得相当简单!
我们三维平面上的任何点都可以用下面两个方程来定义，它们描述了椭圆边缘上的一个点:
x = A * cos y = B * sin
在哪里一个是椭圆宽度的一半，和B是椭圆高度的一半。
一个简单的3D引擎
如果我们的引擎只是在3D空间中创建平面，那么我们就可以构建多个横截面平面来框架我们想要渲染的3D对象。
3D对象渲染示例
横截面平面图
这个特殊的3D形状是通过生成三个横截面平面——顶部、中心和底部平面来创建的。这些假想的平面为我们提供了使用HTML5 Canvas API渲染3D对象所需的所有点。通过创建一个可以生成、平移和旋转这些横截面平面的简单函数，我们有效地创建了一个简单的3D引擎。
以下是HTML5 3D引擎的代码:
//这个简单的3D引擎由www.Html5CanvasTutorials.com提供，用于创建3D HTML5渲染函数Plane(centerX, century, planelth, planeWidth, planeTilt, planeTheta){这个。centerX = centerX;这一点。世纪=世纪;这一点。planeLength = planeLength;这一点。planeTheta = planeTheta;var lastPerspectiveX = null;var lastperspective ex2 = null;var planeNextCornerAngle = 2*Math.asin(planeWidth/planeLength); this.rotate = function(newTheta) { planeTheta = newTheta - planeNextCornerAngle/2; } this.translate = function(newCenterX, newCenterY) { centerX = newCenterX; centerY = newCenterY; } this.generate = function() { var ovalLength = planeLength; var ovalWidth = ovalLength * planeTilt; var perspectiveX = (ovalLength / 2) * Math.cos(planeTheta); var perspectiveY = (ovalWidth / 2) * Math.sin(planeTheta); var perspectiveX2 = (ovalLength / 2) * Math.cos(planeTheta + planeNextCornerAngle); var perspectiveY2 = (ovalWidth / 2) * Math.sin(planeTheta + planeNextCornerAngle); this.topLeftX = (perspectiveX *1) + centerX; this.topLeftY = (perspectiveY * -1) + centerY; this.bottomRightX = (perspectiveX*-1) + centerX; this.bottomRightY = (perspectiveY*1) + centerY this.topRightX = (perspectiveX2 *1) + centerX; this.topRightY = (perspectiveY2 *-1) + centerY; this.bottomLeftX = (perspectiveX2 *-1) + centerX; this.bottomLeftY = (perspectiveY2 *1) + centerY; } }
这个简单的3D引擎是完全免费使用和修改的，只要你在你的代码中保留评论的信用。享受吧!
