在 three.js 裡頭，我們有時會發現某些範例裡頭，會使用到一些在官方文件怎樣都查不到的 API。這有以下兩種情形：

• Three.js 改版常常會改名一些常見的 API 或是 deprecate，在開發之前記得要確認一下migration wiki 確認一下 API 是否有被更名或是刪除。
• three.js 有些模組並不會涵蓋在 three.js 當中，而是用 example 或是擴充的形式存在。

今天要介紹的這個 renderer 並不在 three.js 的官方文件當中，原因好像是因為使用 css 3d 的時機並不多。不過，如果是操作 DOM 元素，或是要進行一些在 DOM 上才有的互動、text content 等等，使用 CSS 3D 的確是個不錯的選擇。

在 https://github.com/mrdoob/three.js/tree/master/examples/js/renderers 有一些 three.js 官方文件中沒有的 renderer 可供使用。今天就用 CSS3DRenderer 當作範例吧！

製作全景圖

接下來的概念就跟我們當初在做全景圖的時候一樣，只是 renderer 換成了 CSS3D。使用上更自由了。

用 CSS3D 製作全景圖，要先把全景圖拆成 6 張圖，分別是：+x,-x,+y,-y,+z,-z。在跟據圖片設定位置跟 rotation。

Youtube Cube

youtube cube

因為 CSS 可以操作 DOM 樣式的關係，所以我們可以很方便地將 youtube 做成 cube（或是其他你喜歡）的形狀，增加網站的互動性。（不過應該是沒有人這樣操作的吧...)

看完了 CSS3DRenderer 的介紹後，明天就讓我們來實作吧！