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 ...

随机推荐

ssh登录过程详细介绍
服务器端和客户端就取得了相同的会话密钥和会话 ID .对于后续传输的数据,两端都会使用会话密钥进行加密和解密,保证了数据传送的安全. http://blog.csdn.net/lhq9220/arti ...
用VBA宏从一个工作薄复制内容到另一个工作薄
我们项目管理有两个工作薄,一个里面有多个表,每天建一个,记录当天项目,另一个工作薄,有多个表,其中一个是所有项目汇总. 以前都是第一个工作薄一个表做完,再复制粘贴到第二个工作薄的汇总表中. 写了个VB ...
Threejs 的场景查看 - 几个交互事件库助你方便查看场景
Threejs 的场景查看 - 几个交互事件库助你方便查看场景太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...
counting objects in class
參考文献:pgno=1">http://www.drdobbs.com/cpp/counting-objects-in-c/184403484? pgno=1
8月30号周五香港接单ING~~化妆品只加10元!!!!!!
8月30号周五香港接单ING~~化妆品只加10元!!!!!! 8月30号周五香港接单ING~~化妆品只加10元!!!!!!
ASA failover应用
failover的条件: 1.硬件型号必须相同 2.系统版本必须一致 3.模式必须一致 4.相同的许可和许可的数量步骤: step 1:配置failover interface,确保状态 up LZ ...
ASA虚墙配置
asa配置ASA Version 8.0(2) <system>!hostname ASA5520enable password 2KFQnbNIdI.2KYOU encryptedno ...
hdu1260（dp）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1260 分析:简单dp,dp[i]=min(dp[i-1]+a[i],dp[i-2]); #includ ...
Java EE (13) -- 常用的基础结构模式
• Replication • Load balance • Failover • Off-load shared resources • Forward cache • R ...
urses.ascii.ispunct(ch):
Nullege: A Search Engine for Python source code urses.ascii.ispunct(ch): TypeError: 'unicode' object ...

JS伪3D 图形透视效果

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

随机推荐

热门专题