如何用 JS 实现 3D 赛车效果 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> 如何用 JS 实现 3D 赛车效果

如何用 JS 实现 3D 赛车效果

浏览:2644次出处信息

本文将分享如何用 JS 写出一个 3D 赛车，我之前曾在技术交流会上也讲过一次(这里是当时用的 PPT)，后来有同学反馈说讲得太深奥没听懂。其实 PPT 里说的更多的是三维图形的基础知识，实现原理体现的稍微少一些，那么本文将着重从实现原理这块做一些补充。

先看赛车的示例：http://ucren.com/racing/，还是半成品状态，很多功能没有实现，不过目前也没有后续的开发计划。

准备工作：

1) 图片素材：图片素材是每一个网页游戏必不可少的，本游戏中素材涉及到白云、远山、N 棵不同的树、小车、时速表盘、时速表针以及其它一些背景图片等。为了实现延伸，这里的白云及远山等图片素材一定要做成首尾相接看起来平滑的，中间不能出现交界痕迹，这样的图片可以从网上找到素材，再用 PhotoShop 进行处理。

2) 矢量绘图库：矢量绘画部分没有必要自己从头写起，我们应该将关注点放在游戏的业务逻辑部分，可以从网上找个自己用得顺手的基础库，比如 excanvas、Raphael 等，如果不考虑浏览器兼容的话，也可以使用 HTML5 提供的

实现原理：

实际上赛车的实现过程中考虑了很多细节的问题，由于篇幅有限，这里只挑一些重点的来介绍。

1) 白云及远山：这两个都是

的背景实现的，通过控制

样式中的 backgroundPositionX 属性来达到移动的目的，注意两个特点：a、运动方向与小车行驶的方向相反(小车左拐时，云和山向右移，反之则相反)；b、由于白云离观察者的距离比远山要远，所以白云运动的速度比山体要慢(本游戏用的速度是 1:4)。在 IE6 下，变更 backgroundPosition 相关属性的值会使背景图片重载，导致界面上看起来闪烁，所以这里要用 document.execCommand(“BackgroundImageCache”, false, true) 命令强制背景图片缓存。

2) 路面：路面最重要的构成是两条贝赛尔曲线，贝塞尔曲线有几个重要的参数――起点、控制点一、控制点二和终点，这样的四个点即构成一条贝赛尔曲线。SVGPath 里的 C 指令可以完成贝塞尔曲线的绘制。路面变换弯度是如何实现的呢？幸好 vml/svg 节点的 path 属性是允许动态改变的，可以通过改变它的 path 来完成弯度的变化，这点 Raphael 库提供了很大的便利。如果是

3) 树木：本游戏中树木是由 6 张图片随机产生的，它们由远及近地运动来向玩家表达车子向前跑的状态，运动是通过不断改变树木的坐标和大小实现的，这里的坐标由路沿的两条贝塞尔曲线来确定。树木的运动有三个特点：a、离观察者越远的树越小，所以运动使树木不断变大，同时也使相邻树木的间距变大；b、由于前面的过程，树木的 y 坐标(top 值)不一定在逐渐增大，有时反而在减小；c、离观察者近的树，层次要位于离得远的树之上。

4) 车子：车子是由一张集合了 13 个可能出现的方向的图片组合而成(见上述图片素材部分)，你可能会奇怪这样的图片怎么制作，其实很简单，我是拿 3dsmax 软件做成的，从网上找了一个 3d 车子模型，用 3dsmax 软件改改样子，并导出不同方向的图片，最终用 PhotoShop 合成。在网页上，用这张图片做为一个

的背景，仍然是通过控制

样式的 backgroundPositionX 属性来达到车子变换方向的目的。本游戏中车子在改变方向或位置的时候，将受到以下参数的影响：当前车速、人为加减速、自然减速(速度自然衰减)、被迫减速(碰擦路沿时)、弯道系数、左右方向键累积系数、离心力大小等，这些参数复合运算后的结果将决定车子当前应该处于的 x 坐标位置和方向。由于实现在不同的模块中，这里就不详细说明这些运算了。

5) 时速表：时速表由表盘和表针组成，表盘是静止的，表针是可以转动的。转动的原理是改变表针的 rotate 属性，这点在 Raphael 库也有也对应的方法实现，参见 Raphael 文档中的 rotate 方法。为了更加逼真，指针加入了抖动策略，具体为：如果车子处于匀速状态下，指针将在当前速度附近抖动，你可以将车子开满 180km/h 看看效果。

6) 速度：这是本游戏中最重要的参数之一，本游戏中将速度量化为 0-1，1 为满速，0 为静止不动。速度参数将决定网页上很多物件的移动：除了车子上述复杂过程外，还有白云和远山的位移速度、路面改变弯道的快慢程度、树木运动的快慢、时速表指针旋转的角度等。

关于实现原理就介绍到这里，下面说说我原来的一些想法：