CSS2DRenderer.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc">[name] is a simplified version of [page:CSS3DRenderer]. The only transformation that is supported is translation.<br /><br />
  12. The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too, the respective DOM elements are wrapped into an instance of `CSS2DObject` and added to the scene graph.<br />
  13. </p>
  14. <h2>Examples</h2>
  15. <p>
  16. [example:css2d_label]<br>
  17. [example:webgl_loader_pdb molecules]
  18. </p>
  19. <h2>Constructor</h2>
  20. <h3>[name]( [param:Object parameters] )</h3>
  21. <p>
  22. [page:DOMElement element] - A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement]
  23. where the renderer appends its child-elements.
  24. This corresponds to the [page:CSS2DRenderer.domElement domElement] property below.
  25. If not passed in here, a new div element will be created.
  26. </p>
  27. <h2>Properties</h2>
  28. <h3>[property:DOMElement domElement]</h3>
  29. <p>
  30. A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] where the renderer appends its child-elements.<br />
  31. This is automatically created by the renderer in the constructor (if not provided already).
  32. </p>
  33. <h2>Methods</h2>
  34. <h3>[method:Object getSize]()</h3>
  35. <p>
  36. Returns an object containing the width and height of the renderer.
  37. </p>
  38. <h3>[method:undefined render]( [param:Scene scene], [param:Camera camera] )</h3>
  39. <p>
  40. Renders a [page:Scene scene] using a [page:Camera camera].<br />
  41. </p>
  42. <h3>[method:undefined setSize]([param:Number width], [param:Number height])</h3>
  43. <p>
  44. Resizes the renderer to (width, height).
  45. </p>
  46. <h2>Source</h2>
  47. <p>
  48. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/CSS2DRenderer.js examples/jsm/renderers/CSS2DRenderer.js]
  49. </p>
  50. </body>
  51. </html>