本文乃原创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
>
仅仅看代码可能一时半会看不出端倪,下面将这块儿的几何图形贴上供参考,由于非常外行所以图形画的比较粗糙,如下图三:
图三
分享到:
相关推荐
利用HTML5实现的3D旋转球效果~~
这是一款html5 Canvas实现酷炫的3D球形文字云动画特效,文字3D旋转运动效果。
个人博客程序中经常会使用的一个功能叫标签云,就是把许多标签文字...今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画,你可以定义任意的文字,然后调用HTML5代码初始化一个3D的球形标签云,效果非常不错。
这是一个使用CSS3实现的3D乒乓球比赛动画,场面效果令人震撼,最关键的是全部用HTML和CSS实现。画面中的乒乓球桌、球拍以及乒乓球都是通过CSS3绘制而成,包括球桌的阴影和乒乓球运动时的投影,3D效果表现得非常逼真...
HTML5 CSS3实现3D感极强的彩色立体文字源码,这个效果超赞啊,这种三维风格我很喜欢,而且颜色很鲜艳,当然了,字符的颜色可以自己定义,具体请参见HTML演示文件,文字内容的自定义也很方便,在HTML中输入文字内容...
包含echarts根据自定义图片内容形状生成词云图,纯 js 简单实现酷炫的3d球体滚动词云,并可实现根据鼠标悬浮位置定向滚动,html5方式根据htmlCanvs画布实现3d球体动态混动,可自由缩放词云画布大小。
球形多图3d旋转,纯css3代码
TML5球体斑点运动动画是一款很酷的HTML5 3D动画效果,是一个小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状。
HTML5 WebGL实现不同质感的3D球体和方块滚落动画效果源码.zip
Html+css+JavaScript实现的3D球面标签云效果
本文用三种方法实现关键字特效,第一个是流动效果,每二个是静态效果,第三个是3D云特效 1.因本文中关键字来自sql数据库的表字段,使用前需配置数据连接参数. 2.多个关键字通过逗号分隔,在读取到的关键字,需根据逗号重新...
基于 Express + Three.js的 3D 球体抽奖程序源码.zip
HTML5+Three.js实现3D低多边形火箭围绕星球转动动画效果源码.zip
HTML5+WebGL+Three.js实现3D效果的麻花和球形之间变形转换动画源码.zip
css3实现球体运动,效果炫酷,需要jquery和jquery.mousewheel插件,请自行下载。
html5实现最震撼公司年会抽奖(源码),可以直接配置员工信息然后使用的,实现动态配置员工信息,实现员工只能中一次奖,实现奖品可灵活配置,实现样式灵活调整,实现抽奖酷炫音效,并且有多种震撼音效可选,可以...
HTML5立体小球运动动画效果是一款利用canvas实现的3d立体空间内小球的运动。
http://a-jie.github.io/Proton/#example (html5多图集合) http://a-jie.github.io/Proton/example/render/pixel/pixelrender.html(聚点成logo) 这里只是提供部分链接,详情可下载文档查看更多!
HTML5立体小球运动动画效果是一款利用canvas实现的3d立体空间内小球的运动。