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激 ...
随机推荐
- Spring集成web环境（使用封装好的工具）
接上文spring集成web环境(手动实现) ##########代码接上文############# spring提供了一个监听器ContextLoaderListener对上述功能的封装,该监听器 ...
- 使用基于Roslyn的编译时AOP框架来解决.NET项目的代码复用问题
理想的代码优化方式 团队日常协作中,自然而然的会出现很多重复代码,根据这些代码的种类,之前可能会以以下方式处理 方式 描述 应用时可能产生的问题 硬编码 多数新手,或逐渐腐坏的项目会这么干,会直接复制 ...
- 学习打卡day16&&echarts入门
echarts有两种部署方式,一种是使用CDN命令,将所需文件安装到目标文件中,"npm install echarts --save",适合于已经学习入门了Vue.第二种是在gi ...
- 纯css 实现动画的暂停和运动
<template> <div> <input id="stop" type="radio" name="p ...
- 新手入门C语言第十章：C作用域规则
C 作用域规则任何一种编程中,作用域是程序中定义的变量所存在的区域,超过该区域变量就不能被访问.C 语言中有三个地方可以声明变量: 在函数或块内部的局部变量 在所有函数外部的全局变量 在形式参数的函数 ...
- python基础练习题（题目 斐波那契数列II）
day16 --------------------------------------------------------------- 实例024:斐波那契数列II 题目 有一分数序列:2/1,3 ...
- 手把手带你入门ECharts
1.什么是ECharts ECharts,缩写来自Enterprise Charts,商业级数据图表,是来自百度商业前端数据可视化团队EFE的一个开源的纯Javascript的图表库,可以流畅的运行在 ...
- 关于fiddler抓包一键生成python脚本
本人贡献一篇关于抓包转换成脚本的文章 步骤一 打开fiddler,抓到包之后,保存成txt文件 步骤二 脚本里str_filename改成保存的文件名 步骤三 执行脚本一键转换 附上脚本,感谢关注~ ...
- Arraylist面试三连问
点赞在看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 本文在公众号文章已同步,还有各种一线大厂面试原题.我的学习系列笔记. Arraylist为什么要加transient? ArrayList源 ...
- ONNXRuntime学习笔记(二)
继上一篇计划的实践项目,这篇记录我训练模型相关的工作. 首先要确定总体目标:训练一个pytorch模型,CIFAR-100数据集测试集acc达到90%:部署后推理效率达到50ms/张, 部署平台为wi ...