1 如何360度的查看立方體

上一節(jié)，我們講解了如何渲染出一個立方體物體，但是不能很好的全方位觀看立方體。這個時候可以使用控制控制器，讓相機圍繞立方體運動，就像地球圍繞太陽一樣運動，去觀察立方體。

1.1 創(chuàng)建軌道控制器

必須傳入2個參數(shù)：

1. 相機，讓哪一個相機圍繞目標(biāo)運動。默認目標(biāo)是原點。立方體在原點處。

2. 渲染的畫布dom對象，用于監(jiān)聽鼠標(biāo)事件控制相機的圍繞運動。

1.2 每一幀根據(jù)控制器更新畫面

因為控制器監(jiān)聽鼠標(biāo)事件之后，要根據(jù)鼠標(biāo)的拖動，來控制相機圍繞目標(biāo)運動，并根據(jù)運動之后的效果，顯示出畫面來。為了保證畫面流暢渲染，選擇使用請求動畫幀requestAnimationFrame，在屏幕渲染下一幀畫面時觸發(fā)回調(diào)函數(shù)來執(zhí)行畫面的渲染。

1.2.1 requestAnimationFrame

是HTML5的新特性，區(qū)別于setTimeout和setInterval。requestAnimationFrame比后兩者精確，采用系統(tǒng)時間間隔，保持最佳繪制效率，不會因為間隔時間過短，造成過度繪制，增加開銷；也不會因為間隔時間太長，使動畫卡頓不流暢，讓各種網(wǎng)頁動畫效果能夠有一個統(tǒng)一的刷新機制，從而節(jié)省系統(tǒng)資源，提高系統(tǒng)性能，改善視覺效果。

requestAnimationFrame是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷。

因此屏幕每一幀都刷新一次畫面，就需要執(zhí)行

2 綜合上述代碼

1、在前面創(chuàng)建的項目中的main.js文件寫入代碼

效果演示：