JS伪3D 图形透视效果

本文地址：http://blog.csdn.net/ei__nino/article/details/9243331

本来是想实现多个圆片的透视效果，对于运算都是测试得出的。不是严谨的数学计算。

使用简单的div布局，css设置的一些形式

有舞台深度stageDeep，圆片深度距离zDistance，和修正角度p可以设置调节图像的整体显示效果。

图形随鼠标运动而运动。

Google Chrom下表现最好。不支持FF

演示地址：http://www.einino.net/circle2.html

下面代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style type="text/css">

body{ height:500px; }

.ineed{width:40px; position:absolute; left:10px;border:1px #666 solid; height:40px; border-radius:20px; margin:5px; background:#EEE; float:left;}

.cross{border:1px #666 solid;position:absolute; }

</style>

</head>

<body>

</body>

<script type="text/javascript" >

//author EI Nino

//E-Mail : Jinyachen@gmail.com

//copyright 2013

function randColor(){

	var v=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E"];

	return "#"+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)]+v[Math.ceil(Math.random()*15%15)];

}

function debug(){

	if(arguments.length==0)

	return;

	var d;

	var p = document.createElement("p");

	var pp;

	for(var i in arguments){

		var a = document.createElement("a");

		a.style.margin="4px";

		a.style.fontFamily="Arial";

		a.style.color=randColor();

		a.innerHTML = i+"@"+arguments[i];

		p.appendChild(a);

	}

	if(!(d=document.getElementById("DEBUG")))

	{

		d = document.createElement("div");

		d.setAttribute("id","DEBUG");

		d.style.width="500px";

		d.style.height="300px";

		d.style.background="#EFE";

		d.style.position="fixed";

		d.style.right="0";

		d.style.top="0";

		d.style.overflow="scroll";

		var h2 = document.createElement("h2");

		h2.innerHTML="DEBUG";

		h2.style.color="#AAA";

		h2.style.fontFamily="Arial";

		d.appendChild(h2);

		document.getElementsByTagName("body")[0].appendChild(d);

	}

	if(!(pp=document.getElementById("debug_p")))

	{

		d.appendChild(p);

	}

	else{

		d.insertBefore(p,pp);

		pp.setAttribute("id","");

	}

	p.setAttribute("id","debug_p");

}

function AngletoPI(a){

	return a/180*Math.PI;

}

function PItoAngle(p){

	return p/Math.PI*180;

}

function AngletoLength(p,z){

	return Math.tan(p)*z;

}

function Length(x,y,z){

	return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)+Math.pow(z,3));

}

//cross

function setCross(){

	for(var i=1; i<60; i++)//Y

	{

		var div =document.createElement("div");

		div.innerHTML="";

		div.className ="cross";

		div.style.width="2px";

		div.style.height="2px";

		div.style.borderRadius =  "2px";

		div.style.borderColor="#F00";

		div.style.zIndex=-200;

		var width = div.style.width.substring(0,div.style.width.indexOf("px"));

		var height = div.style.height.substring(0,div.style.height.indexOf("px"));

		div.style.left=String(clientX/2-width/2)+"px";

		div.style.top =String(i*10)+"px";

		document.getElementsByTagName("body")[0].appendChild(div);

	}

	for(var i=1; i<100; i++)//X

	{

		var div =document.createElement("div");

		div.innerHTML="";

		div.className ="cross";

		div.style.width="2px";

		div.style.height="2px";

		div.style.borderRadius =  "2px";

		div.style.borderColor="#0F0";

		div.style.zIndex=-100;

		var width = div.style.width.substring(0,div.style.width.indexOf("px"));

		var height = div.style.height.substring(0,div.style.height.indexOf("px"));

		div.style.left=String(i*10)+"px";

		div.style.top =String(clientY/2-height/2)+"px";

		document.getElementsByTagName("body")[0].appendChild(div);

	}

	/*for(var i=1; i<90; i++)//Z

	{

		var div =document.createElement("div");

		div.innerHTML="";

		div.className ="cross";

		div.style.width="2px";

		div.style.height="2px";

		div.style.borderRadius =  "2px";

		div.style.borderColor="#00F";

		div.style.zIndex=5;

		var width = div.style.width.substring(0,div.style.width.indexOf("px"));

		var height = div.style.height.substring(0,div.style.height.indexOf("px"));

		div.style.left=String(clientX-i*10)+"px";

		div.style.top =String(i*5)+"px";

		document.getElementsByTagName("body")[0].appendChild(div);

	}*/

}

//cross end

function DrowDiv(width,height,zIndex,vertical,horizon,deep,obj){

	var div =document.createElement("div");

	div.innerHTML="";

	div.className ="ineed";

	width = width-AngletoLength(p,zIndex);

	height = height-AngletoLength(p,zIndex);

	if(width<0)

	{

		return;

	}

	div.style.width=width+"px";

	div.style.height=height+"px";

	div.style.borderRadius = String(width/2)+"px";

	div.style.opacity = 0.6;

	div.style.background="#DDD";//randColor();

	div.style.zIndex=-zIndex;

	div.setAttribute("x",width);

	div.setAttribute("y",height);

	div.setAttribute("z",div.style.zIndex);

	div.style.left=String(clientX/2-width/2-horizon/deep*zIndex)+"px";

	div.style.top =String(clientY/2-height/2-vertical/deep*zIndex)+"px";

	obj.appendChild(div);

}

function Drow3D(v,h,deep){

	if(arguments.length<3)

		deep = stageDeep;

	var obj =document.getElementById("circle_3D");

	obj.innerHTML="";

	for(var i=1; i<10; i++)

	{

		DrowDiv(150,150,i*zDistance,v,h,deep,obj);

	}

	debug(v,h);

}

function Drow3DByMouse(v,h,deep){

	if(arguments.length<3)

		deep = stageDeep;

	h=event.pageX-(clientX/2);

	v=event.pageY-(clientY/2);

	var obj =document.getElementById("circle_3D");

	obj.innerHTML="";

	for(var i=1; i<10; i++)

	{

		DrowDiv(150,150,i*zDistance,v,h,deep,obj);

	}

	debug("y="+v,"x="+h);

}

function createStage(){

	var c = document.createElement("div");

	c.setAttribute("id","circle_3D");

	document.getElementsByTagName("body")[0].appendChild(c);

	stage = document.getElementById("circle_3D");

	stage.style.width="1000px";

	stage.style.height="500px";

	stage.style.border="1px solid #666";

	stage.style.overflow="hidden";

	stage.style.cursor="crosshair";

}

var stage;

createStage();

var clientX = stage.style.width.substring(0,stage.style.width.indexOf("px"));

var clientY = stage.style.height.substring(0,stage.style.height.indexOf("px"));

setCross();

var stageDeep=100;//舞台深度

var zDistance = 40;//物体间的距离

var p = AngletoPI(20);//角度

//Drow3D(-10,50);

document.addEventListener("mousemove",Drow3DByMouse);

</script>

</html>

JS伪3D 图形透视效果的更多相关文章

js 3d图形
使用Three.js在网上中进行3D图形的展示 Three.js的官网https://threejs.org/ 第一个Demo,生成一个旋转的正方体 <style> canvas { wi ...
WPF 图片浏览伪3D效果
原文:WPF 图片浏览伪3D效果首先上效果图: 因项目要求,需要把图片以"好看"."炫"的效果展示出来,特地研究了一下WPF关于3D方面的制作,奈何最终成果 ...
Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
【翻译】基于web创建逼真的3D图形 | CSS技巧
个人翻译小站:http://www.zcfy.cc/article/creating-photorealistic-3d-graphics-on-the-web-css-tricks-4039.htm ...
Three.js - 走进3D的奇妙世界
本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<three. ...
现代3D图形编程学习-基础简介(3)-什么是opengl (译)
本书系列现代3D图形编程学习 OpenGL是什么在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...
现代3D图形编程学习-基础简介(2) (译)
本书系列现代3D图形编程学习基础简介(2) 图形和渲染接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...
现代3D图形编程学习-基础简介(1) (译)
本书系列现代3D图形编程学习基础简介并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量在阅读这本书的时候,你需要熟悉代数和几何 ...
现代3D图形编程学习-环境设置
本书系列现代3D图形编程学习环境设置由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

随机推荐

MongoDB查询命令具体解释
1.查询全部记录复制代码代码例如以下: db.userInfo.find(); 相当于:select* from userInfo; 默认每页显示20条记录,当显示不下的情况下,能够用it迭代命令查 ...
AVOS_百度百科
AVOS_百度百科 AVOS 目录公司产品 AVOS 是 YouTube 创始人 Chad Hurley 和 Steve Chen(陈士骏)创立的互联网公司. 编辑本段公司产品产品包括 ...
不要打开文件，阅读Rvt信息档案
叶老师,想问一下是否能基于revit API 2014,直接在开发时传递给程序要处理的文件名称和路径.而不用再在revit软件中打开为当前活动视图,就直接获得文件里信息.这样可行不? 答: 能够.你能 ...
TCP/IP详细解释--TCP/IP可靠的原则推拉窗拥塞窗口
TCP和UDP在同一水平---传输层.但TCP和UDP最不一样的地方.TCP它提供了一个可靠的数据传输服务,TCP是面向连接的,那.使用TCP两台主机通过第一通信"拨打电话"这个过 ...
Linux创建修改删除用户和组
Linux 创建修改删除用户和组介绍在日常的维护过程中创建用户操作用的相对会多一些,但是在这个过程中涉及到的知识点就不单单就是useradd了,接下来就来详细了解账号管理的相关信息. 用户信息先 ...
LINUX专题之操作系统字符集
原创作品,出自 "深蓝的blog" 博客,欢迎转载.转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog: http://blog.csdn.net/huangyanl ...
GridView的RowDataBound事件中获取当前行内容的几种方法
1. Cells[x].Txt. 从列单元格的文本值获取.这种方法简单高率,最为常用,但是功能单纯.此法存在几个缺点: (1)无法获取到设置了隐藏属性的数据列的值,所取到的值为“”(空). ...
最简单的视音频播放演示样例5：OpenGL播放RGB/YUV
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述最简单的视音频 ...
从头来之【图解针对虚拟机iOS开发环境搭建】（转）
1.下载Mac OSX10.9. 点击下载 2.下载VMware Workstation 10,点击下载,网页中包含序列号.安装VM. 3.VM10-MacOS补丁.用于创建苹果虚拟机. 安装VM就不 ...
【转向Javascript系列】从setTimeout说事件循环模型
本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout ...

JS伪3D 图形透视效果

JS伪3D 图形透视效果的更多相关文章

随机推荐

热门专题