CSS3DRenderer

CSS3DRenderer can be used to apply hierarchical 3D transformations to HTML elements. This renderer is useful to combine HTML elements with WebGL content, e.g. to embed whole websites, YouTube videos, or custom web UI into a 3D scene.

The CSS3DRenderer operates with HTML elements, not regular Verge3D objects. These elements should be wrapped into special objects (CSS3DObject or CSS3DSprite) and then added to the scene graph.

Example


    if (!app.cssRenderer)
        app.enableCSSRenderer();

    // place renderer above 3D canvas
    app.cssRenderer.viewElement.style.zIndex = 0;

    const iframe = document.createElement('iframe');
    iframe.src = 'https://www.soft8soft.com';
    iframe.style.border = 'none';
    iframe.width = 800;
    iframe.height = 600;

    const cssObject = new v3d.CSS3DObject(iframe);
    // 5 units width
    cssObject.scale.setScalar(5/iframe.width);

    app.cssScene.add(cssObject);

Constructor

CSS3DRenderer(domElement : HTMLElement)

element — an HTML element where the renderer appends its child-elements.

This corresponds to the domElement property below.

Properties

# .domElement : HTMLElement

An HTMLElement where the renderer appends its child-elements.

# .viewElement : HTMLElement

An HTMLElement representing viewing plane (created automatically by constructor).

Methods

# .getSize() → Object

Returns an object containing the width and height of the renderer.

# .render(scene : Scene, camera : Camera)

Renders a scene using a perspective or orphographic camera.

# .setSize(width : Float, height : Float)

Resizes the renderer to specified width and height.

Puzzles

There is a puzzle create object / plane with html to create planes which render HTML-based resources, such as websites, custom UIs, or YouTube videos. This puzzle uses CSS3DRenderer under the hood.

Source

For more info on how to obtain the source code of this module see this page.