html实现3d视觉特效
<html>
<head>
<title>HTML5实现3D球效果</title>
<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";
}
}
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 id="tip_info">
</a>
</div> </div>
</body>
</html>
html实现3d视觉特效的更多相关文章
- 【SIGGRAPH】用【有说服力的照片真实】技术实现最终幻想15的视觉特效
原文:西川善司 http://www.4gamer.net/games/075/G007535/20160726064/ 最终幻想15的演讲会场.相当大,听众非常多. 在本次计算机图形和 ...
- HTML5/CSS3(PrefixFree.js) 3D文字特效
之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- Ubuntu 12.04开启3D桌面特效
1.设定软件源,更新软件 点击左边栏Dash主页(Ubuntu图标),输入更新管理器,会出现更新管理器,打开后点设置,弹出软件源对话框,为确保能够正常更新,选主服务器 点击检查,更新完后,点重启 2. ...
- 奥比中光3D视觉传感器--OpenNI 2配置
PrimeSense是Kinect一代的芯片供应商,位于以色列,也是开源体感开发包OpenNI 的维护者.自从被 Apple 收购后,销声匿迹,OpenNI 也停止更新.现在可以从网站http://s ...
- html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container"&g ...
- 3.CCFadeOutTRTiles，部落格效果，跳动的方块特效，3D瓷砖晃动特效，破碎的3D瓷砖特效，瓷砖洗牌特效，分多行消失特效，分多列消失特效
1 TiledGrid3D //TiledGrid3D //CCFadeOutTRTiles * action = CCFadeOutTRTiles::create(2, CCSize(20,2 ...
- 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...
- 3D视觉基础（基本原理及3D传感器基本参数）
本人所在行业属于3D视觉方向,因此最近也是学习了很多3D视觉的知识,这次专门总结一下. 传统工业机器视觉中,2D指的是X方向加Y方向,那么3D视觉自然就是加了一个Z方向.目前我接触到的公司产品是3D激 ...
随机推荐
- Java数组的常见算法2
1. 求数值型数组中元素的最大值.最小值.平均值.总值等 2. 数组的复制.反转.查找(线性查找.二分法查找)
- oracle查看当前用户表结构、主键、索引
1.查询表的所有列及其属性 select t.*,c.COMMENTS from user_tab_columns t,user_col_comments c where t.table_name = ...
- Java-GUI编程之绘图
绘图 很多程序如各种小游戏都需要在窗口中绘制各种图形,除此之外,即使在开发JavaEE项目时,有时候也必须"动态"地向客户 端生成各种图形.图表,比如 图形验证码.统计图等,这都需 ...
- VS Code失焦时自动保存编辑器内容
vs code有一个非常好用的功能:就是自动保存. 而且不需要安装什么插件,只需要在编辑器设置就可以了.接下来我们一起来设置吧: 1.打开我们的vs code编辑器.在左下角有个 齿轮图标(管理), ...
- 如何离线安装posh-git
不用上github 1.下载post-git离线安装包 地址:https://files.cnblogs.com/files/xcr1234/posh-git-master.zip 2,用Powers ...
- MySQL免安装版发生系统错误 1067
使用MySql免安装版启动时1067 解决办法 打开安装的文件夹 找到my.ini的mysqld模块,调整参数位置. 3. 重新启动Mysql服务 net start mysql
- Java基础语法Day_02-03（数据类型、运算符、方法、循环结构）
第5节 数据类型转换 day02_01_数据类型转换_自动转换 day02_02_数据类型转换_强制转换 day02_03_数据类型转换_注意事项 day02_04_ASCII编码表 第6节 运算符 ...
- 从0开始用webpack开发antd,react组件库npm包并发布
一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...
- 记一次sql注入的解决方案
点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 本文在公众号文章已同步,还有各种一线大厂面试原题.我的学习系列笔记. 今天业务提了个模糊查询,一听就知道这种问题有坑,肯定涉及到sql注入, ...
- 自学java的困难
在自学的一些基础阶段,倒是没什么太大的问题,但是在想搞一个项目的时候,就显得手足无措了.因为,很多博主讲的的那些,都行需要一定的条件,比如前端框架,数据库的数据等等. 简单一点的SSM框架整合相对简单 ...