Blockbench Reference Docs
    Preparing search index...

    Class CSS3DRenderer

    This renderer can be used to apply hierarchical 3D transformations to DOM elements via the CSS3 [transform]https://www.w3schools.com/cssref/css3_pr_transform.asp property. CSS3DRenderer is particularly interesting if you want to apply 3D effects to a website without canvas based rendering. It can also be used in order to combine DOM elements with WebGLcontent.

    There are, however, some important limitations:

    • It's not possible to use the material system of three.js.
    • It's also not possible to use geometries.
    • The renderer only supports 100% browser and display zoom.

    So CSS3DRenderer is just focused on ordinary DOM elements. These elements are wrapped into special 3D objects (CSS3DObject or CSS3DSprite) and then added to the scene graph.

    @three_import import { CSS3DRenderer } from 'three/addons/renderers/CSS3DRenderer.js';

    Index

    Constructors

    constructor

    Properties

    domElement getSize render setSize

    Constructors

    • Constructs a new CSS3D renderer.

      Parameters

      • Optionalparameters: {}

        The parameters.

      Returns CSS3DRenderer

    Properties

    domElement: DOMElement

    The DOM where the renderer appends its child-elements.

    getSize: () => { height: number; width: number }

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

    Type Declaration

      • (): { height: number; width: number }

      • Returns { height: number; width: number }

        The size of the renderer.

    render: (scene: Object3D, camera: Camera, is_main: any) => void

    Renders the given scene using the given camera.

    Type Declaration

      • (scene: Object3D, camera: Camera, is_main: any): void

      • Parameters

        • scene: Object3D

          A scene or any other type of 3D object.

        • camera: Camera

          The camera.

        • is_main: any

        Returns void

    setSize: (width: number, height: number) => void

    Resizes the renderer to the given width and height.

    Type Declaration

      • (width: number, height: number): void

      • Parameters

        • width: number

          The width of the renderer.

        • height: number

          The height of the renderer.

        Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties