JavaScript 实现二维空间伪3D透视效果与坐标转换
本文详解如何在二维网页空间中模拟三维视觉效果。核心原理是将三维坐标转换为二维坐标，利用透视公式 scale = fl / (fl + z) 计算物体大小比例。文章采用面向对象思想构建场景与物件模型，并提供多个包含鼠标交互的完整代码示例，展示如何通过调整观察点距离和物体深度实现近大远小的真实透视感。
二维空间伪3D透视原理
要在二维屏幕空间中呈现三维视觉效果，核心在于将三维坐标映射为二维坐标。其基本视觉依据遵循透视原理：物体距离观察者越远，其在画面中呈现的尺寸越小，且位置逐渐向消失点收敛。
实现该效果的关键在于应用透视变换公式。
计算公式为：scale = fl / (fl + z);
其中，scale 表示缩放比例，取值范围在 0.0 到 1.0 之间；fl 代表观察点到成像平面的焦距，通常保持固定值；z 则是物体在三维空间中的深度坐标（Z轴）。
面向对象场景构建
在编写具体代码前，建议采用面向对象的设计思路。例如，定义一个“场景”对象作为容器，它代表一个三维空间，内部可容纳多个“物件”对象。每个物件拥有 x、y、z 三个维度的坐标属性。场景负责管理这些物件，并根据计算出的坐标值将它们渲染在二维屏幕的特定位置，从而决定最终显示效果。
以下示例中，请通过移动鼠标及滚动滚轮来交互控制效果。
交互效果代码示例
效果演示一
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>伪3d透视效果</title> <style> 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;} </style> </head> <body> <div id="box"> </div> <div id="debug"></div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
效果演示二
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>伪3d透视效果</title> <style> 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;} </style> </head> <body> <div id="box"> </div> <div id="debug"></div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
效果演示三
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>伪3d透视效果</title> <style> 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;} </style> </head> <body> <div id="box"> </div> <div id="debug"></div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
效果演示四
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>伪3d透视效果</title> <style> 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;} </style> </head> <body> <div id="box"> </div> <div id="debug"></div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53