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激 ...
随机推荐
- MFC---简介、编码、结构和消息响应
MFC简介 MFC是微软基础类库的简称,是微软公司实现的一个c++类库,主要封装了大部分的windows API函数 在MFC中,可以直接调用 windows API,同时需要引用对应的头文件或库文件 ...
- 01 | 堆、栈、RAII：C++里该如何管理资源？（极客时间笔记）
基本概念 堆,英文是 heap,在内存管理的语境下,指的是动态分配内存的区域.这个堆跟数据结构里的堆不是一回事.这里的内存,被分配之后需要手工释放,否则,就会造成内存泄漏. C++ 标准里一个相关概念 ...
- windows安装rabbitmq踩坑实录
最近学习springcloud消息总线需要用到rabbitmq,然后安装的时候踩了一些坑,记录如下: 首先安装rabbitmq之前需要先安装erlang,因为rabbitmq服务端使用erlang写的 ...
- [已解决] npm ERR! code EINVALIDPACKAGENAME Invalid package name "": name cannot start with an underscore;
打开 cmd 输入 `npm update -g` 等待更新完成即可
- 20202127 实验一《Python程序设计》实验报告
20202127 2022-2022-2 <Python程序设计>实验一报告课程:<Python程序设计>班级: 2021姓名: 马艺洲学号:20202127实验教师:王志强实 ...
- 如何使用 pyqt 实现 Groove 音乐播放器
前言 Win10 自带了一款很好用的音乐播放器 -- Groove 音乐,但是只能支持本地音乐的播放.2020年3月底到4月底,自己一直在学习 PyQt5,然后从 2020年5月开始,着手使用 PyQ ...
- Jenkins Build step 'Execute shell' marked build as failure
问题出现: Jenkins一直都构建成功,今天突然报错:Jenkins Build step 'Execute shell' marked build as failure 问题原因: By defa ...
- ucore lab5 用户进程管理 学习笔记
近几日睡眠质量不佳,脑袋一困就没法干活,今天总算时补完了.LAB5难度比LAB4要高,想要理解所有细节时比较困难.但毕竟咱不是要真去写一个OS,所以一些个实现细节就当成黑箱略过了. 这节加上了用户进程 ...
- Hadoop（四）C#操作Hbase
Hbase Hbase是一种NoSql模式的数据库,采用了列式存储.而采用了列存储天然具备以下优势: 可只查涉及的列,且列可作为索引,相对高效 针对某一列的聚合及其方便 同一列的数据类型一致,方便压缩 ...
- Win10系统链接蓝牙设备
1. 进入控制面板,选择 设备 2. 进入设备界面,删除已有蓝牙,如果蓝牙耳机已经链接其他设备,先断开链接 3. 点击添加蓝牙或其他设备 4. 选择蓝牙,选择你的蓝牙耳机名称