CSS3DRenderer

CSS3DRenderer используется для применения 3Д-трансформаций к HTML-элементам. Этот рендерер полезен для примешивания HTML-элементов к WebGL-контенту, например для встраивания страниц, видео или пользовательских интерфейсов внутрь 3Д-сцен.

CSS3DRenderer оперирует с HTML-элементами, а не штатными объектами «Вердж3Д». Эти элементы должны быть обёрнуты в специальные объекты CSS3DObject и CSS3DSprite, а затем добавлены в граф сцены.

Пример


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

    // разместить рендерер поверх 3Д-канваса
    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 единиц ширины
    cssObject.scale.setScalar(5/iframe.width);

    app.cssScene.add(cssObject);

Конструктор

CSS3DRenderer(domElement : HTMLElement)

element — HTML-элемент в который рендерер добавляет дочерние элементы.

Соответствует свойству domElement, описанному ниже.

Properties

# .domElement : HTMLElement

HTMLElement в который рендерер добавляет дочерние элементы.

# .viewElement : HTMLElement

HTMLElement представляющий плоскость просмотра (создаётся автоматически в конструкторе).

Методы

# .getSize() → Object

Возвращает объект, содержащий ширину и высоту рендерера.

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

Рендерит сцену с использованием перспективной или ортографической камеры.

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

Масштабирует рендерер под указанные ширину и высоту.

Пазлы

«Вердж3Д» включает пазл create object / plane with html, который используется для создания плоскостей, отображающих HTML-ресурсы: вебсайтов, пользовательских интерфейсов или роликов с сервисов просмотра видео. Этот пазл основан на CSS3DRenderer.

Исходный файл

О том как получить исходный код этого модуля читайте тут.