js模擬3D場景效果代碼打包

更新時間：2012年01月04日 17:36:28 作者：

這幾個demo上星期平安夜做的，感覺效果不錯，就放在出來，分享給大家

要在二維空間模擬出三維的效果，就需要把三維的坐標轉(zhuǎn)換成二維坐標。一個最基本依據(jù)是：東西越遠，看到大小就越小，坐標越往消失點靠攏。
　　透視公式：
　　 scale = fl / (fl + z);
　　 scale是大小的比例值，0.0到1.0之間，fl是觀察點到成像面的距離，通常這個值是固定，z就是物件的三維空間中的z軸。
　　在寫這些代碼之前，我喜歡用面向?qū)ο髞砻枋鑫覍懙倪@些東西，比如我需要一個場景，場景是個空間，空間內(nèi)是可以容納各種物件的，物件是個對象，物件是是x,y,z三個維度的，場景可以插入任意多的物件，物件就會以它的坐標值，顯示在場景的特定位置，由場景來負責物件的顯示位置。
　　一些demo，請使用鼠標移動及滾輪來控制。
效果1

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

效果2

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

效果3

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

效果4

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

3D場景

僅IE不支持setTimeout/setInterval函數(shù)的第三個以上參數(shù)
setTimeout/setInterval，這兩個函數(shù)相信前端開發(fā)同學都很熟悉。它們在非IE(6-9)瀏覽器中還可以如下使用
2011-05-05
Javascript獲取CSS偽元素屬性的實現(xiàn)代碼
這篇文章主要介紹了Javascript獲取CSS偽元素屬性的實現(xiàn)代碼,需要的朋友可以參考下
2014-09-09
TypeScript新特性之using關鍵字的使用方法
TypeScript 5.2版本中新添加了using關鍵字,目前該關鍵字的提案也進入了ECMAScript的Stage 3,也就是說很快就會進入JavaScript語言本身中,using和const, let和var一樣都是用于變量聲明的,那么它到底有什么與眾不同的地方呢,本文給大家介紹的非常詳細
2023-11-11
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題，感興趣的朋友可以參考一下
2016-04-04
JS 屏蔽鍵盤不可用與鼠標右鍵不可用的方法
這篇文章主要介紹了JS 屏蔽鍵盤不可用與鼠標右鍵不可用的方法，有需要的朋友可以參考一下
2013-11-11
Javascript數(shù)據(jù)結(jié)構之棧和隊列詳解
要了解JavaScript數(shù)組的堆棧和隊列方法的操作,需要先對堆棧和隊列基礎知識有所了解,下面這篇文章主要給大家介紹了關于Javascript數(shù)據(jù)結(jié)構之棧和隊列的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
js實現(xiàn)拖拽元素選擇和刪除
這篇文章主要為大家詳細介紹了js實現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享
這篇文章主要介紹了使用CSS+JavaScript或純js實現(xiàn)半透明遮罩效果的實例分享,編寫半透明遮罩層時要注意定位問題、不要滿屏遮罩,需要的朋友可以參考下
2016-05-05
Typescript 實現(xiàn)函數(shù)重載的方式
函數(shù)重載簡單點說就是,同一個函數(shù)的不同實現(xiàn)方式,根據(jù)傳入的參數(shù)的類型或者長度,決定最終調(diào)用哪一個實現(xiàn),本文給大家介紹了Typescript 實現(xiàn)函數(shù)重載的方式,需要的朋友可以參考下
2024-05-05
原生js獲取寬高與jquery獲取寬高的方法關系對比
這篇文章主要介紹了原生js獲取寬高與jquery獲取寬高的方法關系對比,需要的朋友可以參考下
2014-04-04