js模擬3D場(chǎng)景效果代碼打包
更新時(shí)間：2012年01月04日 17:36:28 作者：
這幾個(gè)demo上星期平安夜做的，感覺(jué)效果不錯(cuò)，就放在出來(lái)，分享給大家
要在二維空間模擬出三維的效果，就需要把三維的坐標(biāo)轉(zhuǎn)換成二維坐標(biāo)。一個(gè)最基本依據(jù)是：東西越遠(yuǎn)，看到大小就越小，坐標(biāo)越往消失點(diǎn)靠攏。
透視公式：
scale = fl / (fl + z);
scale是大小的比例值，0.0到1.0之間，fl是觀察點(diǎn)到成像面的距離，通常這個(gè)值是固定，z就是物件的三維空間中的z軸。
在寫這些代碼之前，我喜歡用面向?qū)ο髞?lái)描述我寫的這些東西，比如我需要一個(gè)場(chǎng)景，場(chǎng)景是個(gè)空間，空間內(nèi)是可以容納各種物件的，物件是個(gè)對(duì)象，物件是是x,y,z三個(gè)維度的，場(chǎng)景可以插入任意多的物件，物件就會(huì)以它的坐標(biāo)值，顯示在場(chǎng)景的特定位置，由場(chǎng)景來(lái)負(fù)責(zé)物件的顯示位置。
一些demo，請(qǐng)使用鼠標(biāo)移動(dòng)及滾輪來(lái)控制。
效果1
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
效果2
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
效果3
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
效果4
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
透視公式：
scale = fl / (fl + z);
scale是大小的比例值，0.0到1.0之間，fl是觀察點(diǎn)到成像面的距離，通常這個(gè)值是固定，z就是物件的三維空間中的z軸。
在寫這些代碼之前，我喜歡用面向?qū)ο髞?lái)描述我寫的這些東西，比如我需要一個(gè)場(chǎng)景，場(chǎng)景是個(gè)空間，空間內(nèi)是可以容納各種物件的，物件是個(gè)對(duì)象，物件是是x,y,z三個(gè)維度的，場(chǎng)景可以插入任意多的物件，物件就會(huì)以它的坐標(biāo)值，顯示在場(chǎng)景的特定位置，由場(chǎng)景來(lái)負(fù)責(zé)物件的顯示位置。
一些demo，請(qǐng)使用鼠標(biāo)移動(dòng)及滾輪來(lái)控制。
效果1
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
效果2
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
效果3
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
效果4
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- js實(shí)現(xiàn)3D圖片展示效果
- 純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
- JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼
- js＋vml創(chuàng)建3D頁(yè)面效果代碼
- js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效代碼分享
- 原生javascript+css3編寫的3D魔方動(dòng)畫旋扭特效
- JS實(shí)現(xiàn)的3D拖拽翻頁(yè)效果代碼
- 基于css3新屬性transform及原生js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)3d立方體旋轉(zhuǎn)
- 基于javascript html5實(shí)現(xiàn)3D翻書特效
- js實(shí)現(xiàn)3D圖片環(huán)展示效果
相關(guān)文章
firefox中用javascript實(shí)現(xiàn)鼠標(biāo)位置的定位
firefox中用javascript實(shí)現(xiàn)鼠標(biāo)位置的定位...2007-06-06
閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)。2010-07-07
獲取JAVASCRIPT時(shí)間戳函數(shù)的5種方法
JavaScript獲得時(shí)間戳的方法有五種,后四種都是通過(guò)實(shí)例化時(shí)間對(duì)象new?Date()?來(lái)進(jìn)一步獲取當(dāng)前的時(shí)間戳,JavaScript處理時(shí)間主要使用時(shí)間對(duì)象Date,本文對(duì)js時(shí)間戳函數(shù)獲取方法給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
Tangram開源將近一周，持續(xù)圍觀了幾天。寫一個(gè)簡(jiǎn)單的圍觀筆記吧。2010-12-12
js replace 與replaceall實(shí)例用法詳解
這篇文章介紹了js replace 與replaceall實(shí)例用法詳解，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了JavaScript中return false的用法,在大多數(shù)情況下,為事件處理函數(shù)返回false,可以防止默認(rèn)的事件行為,需要的朋友可以參考下2015-03-03
JS使用單鏈表統(tǒng)計(jì)英語(yǔ)單詞出現(xiàn)次數(shù)
這篇文章主要為大家詳細(xì)介紹了JS使用單鏈表統(tǒng)計(jì)英語(yǔ)單詞出現(xiàn)次數(shù)的相關(guān)資料，列出所有單詞及其出現(xiàn)次數(shù)，感興趣的小伙伴們可以參考一下2016-06-06
項(xiàng)目需要做了如下的東西，希望能給其他需要的同學(xué)們一點(diǎn)參考。2010-08-08
JS使用cookie實(shí)現(xiàn)只出現(xiàn)一次的廣告代碼效果
我們上網(wǎng)經(jīng)常會(huì)遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況，其實(shí)是運(yùn)用了Cookie 存儲(chǔ) web 頁(yè)面的用戶信息，Cookie 以名/值對(duì)形式存儲(chǔ),當(dāng)瀏覽器從服務(wù)器上請(qǐng)求 web 頁(yè)面時(shí)， 屬于該頁(yè)面的 cookie 會(huì)被添加到該請(qǐng)求中2017-04-04
本文主要給大家詳細(xì)總結(jié)了下javascript中的運(yùn)算符，包括常見的算數(shù)運(yùn)算符、比較運(yùn)算符和邏輯運(yùn)算符。十分的清晰，有需要的小伙伴可以參考下。2015-06-06