HTML5实现3D球效果

  本文乃原创demo，转载请注明出处：http://blog.csdn.net/qingfeilee/article/details/7437972 ，使用代码请保留作者署名，谢谢！

    曲终人即散，每当看到这个词汇总是略感的伤感。现在的我们周围的生活节奏是如此之快，尤其是生活在北京这个经济高速发展的地方。有时曲可能尚未终，可是人已经散！当我们下班后漫步在繁华都市的夜幕之下，总是略感孤独和伤感。或许是由于工作压力，也或许是因为亲人爱人不在身边，更或许是自己的心一次次的被冲击。京城周末的夜晚丝毫没有因为是夜晚而变得静谧，而我总是急匆匆的上了回家的夜班车。或许我应该停下脚步去聆听、去感受、去享受，但是我却找不到一个这样的地方，唯独小区里的那张长长的木椅。喧嚣的夜幕总是让我想起电视上看见的迪厅里悬挂的那个水晶球，如此的耀眼，如此的抢眼。人们在球的衬托下排遣着自己的疲惫，宣泄着自己的寂寞，放纵着自己的形态……

   作为IT小生制造那支能够在头顶上旋转的球有一定难度，但可以让其在电脑中为人们表演。

   这篇博客描述的是如何实现一个3D球的效果，主要是通过HTML5里面的canvas来实现。整片文章属于原创若有相同纯属有缘，在做这个效果之前简略的学习了一下《3D数学基础》收获颇丰，因为大学里面学的数学基本上都还给了老师。闲话少说，先看实现的效果如图一：

图一

    要想使得整个球动起来，需要先激活。然后再改变他的旋转方向或者改变这个小球的半径。看启动后的效果，如图二：

图二

    这里为什么要设定一个2秒冻结，因为如果立刻冻结的话整个求的样式就无法及时改变所以就采取了这样一个迂回之策。详见代码如下：

 

<
html
>
    <
head
>
        <
title
>
            再回首，那只小球已停止转动——HTML5实现3D球效果
        </
title
>
        <
meta
 
charset
=
"utf-8"
>
        <
style
 
type
=
"text/css"
>
            #box{
                border:2px solid #f60; margin:0 auto;
            }
        </
style
>
        <
script
>
            var spaceX
 = 
30
; //X方向的密度
            var spaceY
 = 
30
; //Y方向的密度
            var PI
 = 
Math
.PI; //数学角度π
            var radius
 = 
200
; //球的半径
            var radian
 = 
PI
 / 180; //弧度
            var speedX
 = 
0
; //X方向的速度
            var speedY
 = 
0
; //Y方向的速度
            var offsetX
 = 
300
; //X方向的偏移量相当于将球的中心X坐标移之到画布中央
            var offsetY
 = 
300
; //Y方向的偏移量相当于将球的中心Y坐标移之到画布中央
            var spheres
 = 
new
 Array(); //存储像素点
            var canvas; //画布
            var context; //上下文
            var focalLength
 = 
300
; //控制球距离屏幕的距离
            var start
 = 
true
; //是否启动
            var sx
 = 
0
; //sinx
            var cx
 = 
0
; //cosx
            var sy
 = 
0
; //siny
            var cy
 = 
0
; //cosy
            var sz
 = 
0
; //sinz
            var cz
 = 
0
; //cosz
            var innerStaColor
 = 
"GREEN"
; //表示内部颜色
            var outerStaColor
 = 
"RED"
; //外部颜色
            var objectRadius
 = 
10
; //绘制原点半径
            var scaleRatio
 = 
0
;

            var cameraView
 = {
                x: 0,
                y: 0,
                z: 0,
                rotX: 0,
                rotY: 0,
                rotZ: 0
            }; //视角角度
            /**
            author:qingfeilee
            date:2012-03-28
            description:初始化系统画布信息
        **/
            function initCanvas() {
                try{
                    canvas
 = 
document
.getElementById("sphere");
                    context
 = 
canvas
.getContext("2d");
                }catch(e){
                     document.getElementById("tip_info").innerHTML
 = 
"您的浏览器不支持！"
;
                }
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:初始化小球实体
        **/
            function initSphere() {
                for (var i
 = 
spaceY
; i 
<
 
180
; i += spaceY) {
                    for (var angle
 = 
0
; angle 
<
 
360
; angle += spaceX) {
                        var object
 = {};
                        var x
 = 
Math
.sin(radian * i) * radius;

                        object.x
 = 
Math
.cos(angle * radian) * x;
                        object.y
 = 
Math
.cos(radian * i) * radius;
                        object.z
 = 
Math
.sin(angle * radian) * x;
                        object.glow
 = .5; //亮度的范围
                        spheres.push(object);
                    }
                }
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:初始化系统函数
        **/
            function init() {
                initCanvas();
                initSphere();
                setInterval(this.update, 1000 / 60, this);
                setTimeout(function() {
                    start
 = 
false
;
                },
                1000);
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:设置整个大球的运转速度
        **/
            function setSpeed(speedX, speedY) {
                this.speedX
 = 
speedX
;
                this.speedY
 = 
speedY
;
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:更新整个球的状态以实现动态效果
        **/
            function update() {
                if (start) {
                    setParam();
                }
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:设置各个小球的属性
        **/
            function setParam() {
                //根据速度大小计算出一次旋转的角度大小
                var rotYstep
 = 
speedX
 / 10000;
                var rotXstep
 = 
speedY
 / 10000;
                cameraView.rotY
 = 
rotYstep
;
                cameraView.rotX
 = -rotXstep;
                //计算出对应的cos和sin
                sx
 = 
Math
.sin(cameraView.rotX);
                cx
 = 
Math
.cos(cameraView.rotX);
                sy
 = 
Math
.sin(cameraView.rotY);
                cy
 = 
Math
.cos(cameraView.rotY);
                sz
 = 
Math
.sin(cameraView.rotZ);
                cz
 = 
Math
.cos(cameraView.rotZ);

                // 设置画布的效果
                context.fillStyle
 = 
'rgba(0,0,0,0.1)'
;
                context.fillRect(0, 0, canvas.width, canvas.height);

                var l
 = 
spheres
.length - 1;

                for (var i
 = 
l
,
                obj; obj
 = 
spheres
[i]; i--) {
                    render(obj);
                }
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:渲染整个画布
        **/
            function render(object) {
                var xy, xz, yx, yz, zx, zy;

                // 计算出物体的相对于照相机的位置
                var x
 = 
object
.x - cameraView.x;
                var y
 = 
object
.y - cameraView.y;
                var z
 = 
object
.z - cameraView.z;

                // 绕X轴旋转
                xy
 = 
cx
 * y - sx * z;
                xz
 = 
sx
 * y + cx * z;
                // 绕Y轴旋转
                yz
 = 
cy
 * xz - sy * x;
                yx
 = 
sy
 * xz + cy * x;
                // 绕Z轴旋转
                zx
 = 
cz
 * yx - sz * xy;
                zy
 = 
sz
 * yx + cz * xy;
                //给各个球重新定位
                object.x
 = 
zx
;
                object.y
 = 
zy
;
                object.z
 = 
yz
;

                //根据z轴数据来缩放球
                scaleRatio
 = 
focalLength
 / (focalLength + yz);
                scale
 = 
scaleRatio
;

                if (object.glow >
 .5) {
                    object.glow -
= .02;
                }

                var sphereStyle
 = 
context
.createRadialGradient(offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio,
                scaleRatio * .5, offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, scaleRatio * objectRadius * .5);
                sphereStyle.addColorStop(0, innerStaColor);
                sphereStyle.addColorStop(object.glow, outerStaColor);
                sphereStyle.addColorStop(1, 'rgba(0,0,0,0)');

                context.fillStyle
 = 
sphereStyle
;
                context.fillRect(offsetX + object.x * scaleRatio - scaleRatio * objectRadius * .5,
                offsetY + object.y * scaleRatio - scaleRatio * objectRadius * .5, scaleRatio * objectRadius, scaleRatio * objectRadius);
                 document.getElementById("tip_info").innerHTML
 = 
"当前速度："
+speedX+"  "+ speedY+"   小球半径："+objectRadius;

            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:冻结/激活真个大球状态
        **/
            function startOrPause() {
                if (start) {
                    setTimeout(function() {
                        start
 = 
false
;
                    },
                    2000);
                    document.getElementById("swi").innerHTML
 = 
"激活"
;
                    innerStaColor
 = 
"GREEN"
;
                    outerStaColor
 = 
"RED"
;
                } else {
                    start
 = 
true
;
                    document.getElementById("swi").innerHTML
 = 
"2秒后冻结"
;
                    innerStaColor
 = 
"RED"
;
                    outerStaColor
 = 
"GREEN"
;
                }
            }
            /**
            author:qingfeilee
            date:2012-03-28
            description:改变球的大小
        **/
            function changeObjectRadius(val) {
                this.objectRadius
 = 
val
;
            }
            window.addEventListener("load", init, true);
        </
script
>
    </
head
>
    <
body
>
        <
div
 
id
=
"box"
 
style
=
"width:600px; height:600px"
>
            <
canvas
 
id
=
"sphere"
 
width
=
"600"
 
height
=
"600"
 
style
=
"background:#0066FF"
>
            </
canvas
>
            <
div
 
align
=
"center"
>
                <
button
 
id
=
"swi"
 
onclick
=
"startOrPause()"
>
                    激活
                </
button
>
                <
button
 
onclick
=
"setSpeed(-150,0)"
>
                    向东
                </
button
>
                <
button
 
onclick
=
"setSpeed(150,0)"
>
                    向西
                </
button
>
                <
button
 
onclick
=
"setSpeed(0,-150)"
>
                    向南
                </
button
>
                <
button
 
onclick
=
"setSpeed(0,150)"
>
                    向北
                </
button
>
                小球大小：
                <
input
 
type
=
"range"
 
min
=
"10"
 
max
=
"30"
 
value
=
"10"
 
step
=
"2"
 
onchange
=
"changeObjectRadius(this.value)"
/>
            </
div
>
            <
div
 
align
=
"center"
>
                <
a
 
href
=
'http://blog.csdn.net/qingfeilee/'
>
                        阿飞blog
                </
a
>
                <
a
 
id
=
"tip_info"
>
                </
a
>
            </
div
>

        </
div
>
    </
body
>
</
html
>

  仅仅看代码可能一时半会看不出端倪，下面将这块儿的几何图形贴上供参考，由于非常外行所以图形画的比较粗糙，如下图三：

图三

      通过上面的图形我们很容易得出initSphere函数里面的一些计算。这样就可以将球的各个点进行了初始化。

      然后就是旋转，我们以绕Y轴旋转为例。假设当前时刻某点P（X,Y,Z）绕Y轴旋转α度，到P1（X1,Y1,Z1）这两者有何关系呢？不再赘述直接给出公式：X1 = X*cosα + Z*sinα；Y1 = Y；Z1=-X*sinα+Z*cosα不懂的复习一下高等书写，O(∩_∩)O哈哈~。绕其他轴旋转同理，这样就得到了update方法里面的算法。当然在3D中还存在一个视角角度，就相当于摄像机一样，本例子中默认是是0，0，0。

     由代码注释较详细，具体就不再赘述。哪位大牛有好的算法实现希望能够多多交流，共同学习，共同进步，欢迎拍砖。

     本文乃原创demo，转载请注明出处：http://blog.csdn.net/qingfeilee/article/details/7437972 ，使用代码请保留作者署名，谢谢！

    附件：http://download.csdn.net/detail/qingfeilee/4208565

评论

1 楼 逝叶1314 2013-10-14