js模拟3D场景效果代码打包

要在二维空间模拟出三维的效果，就需要把三维的坐标转换成二维坐标。一个最基本依据是：东西越远，看到大小就越小，坐标越往消失点靠拢。　　透视公式：　　 scale = fl / (fl + z); 　　 scale是大小的比例值，0.0到1.0之间，fl是观察点到成像面的距离，通常这个值是固定，z就是物件的三维空间中的z轴。　　在写这些代码之前，我喜欢用面向对象来描述我写的这些东西，比如我需要一个场景，场景是个空间，空间内是可以容纳各种物件的，物件是个对象，物件是是x,y,z三个维度的，场景可以插入任意多的物件，物件就会以它的坐标值，显示在场景的特定位置，由场景来负责物件的显示位置。　　一些demo，请使用鼠标移动及滚轮来控制。效果1 伪3d透视效果 html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 效果2 伪3d透视效果 html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 效果3 伪3d透视效果 html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#fff; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 效果4 伪3d透视效果 html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

通过下面的代码可以实现这种切换的效果。首先我们来看界面：界面代码：复制代码代码如下: <body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 200px;"> <>>>详细阅读

本文标题：js模拟3D场景效果代码打包

地址：http://www.17bianji.com/kaifa2/JS/23756.html

1/2 1