three.js CSS3DRenderer

2023-02-16 17:51 更新

CSS3DRenderer用于通過CSS3的transform屬性, 將層級的3D變換應用到DOM元素上。 如果你希望不借助基于canvas的渲染來在你的網站上應用3D變換,那么這一渲染器十分有趣。 同時,它也可以將DOM元素與WebGL的內容相結合。然而,這一渲染器也有一些十分重要的限制:

  • 它不可能使用three.js中的材質系統(tǒng)。
  • 同時也不可能使用幾何體。

因此,CSS3DRenderer僅僅關注普通的DOM元素,這些元素被包含到了特殊的對象中(CSS3DObject或者CSS3DSprite),然后被加入到場景圖中。

例子

molecules
orthographic camera
periodictable
sprites

構造函數(shù)

CSS3DRenderer()

方法

.getSize () : Object

返回一個包含有渲染器寬和高的對象。

.render ( scene : Scene, camera : PerspectiveCamera ) : undefined

使用perspective camera渲染scene。

.setSize (width : Number, height : Number) : undefined

將渲染器尺寸重新調整為(width, height)。

源代碼

examples/jsm/renderers/CSS3DRenderer.js


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號