CSS3DRenderer - Руководство по Вердж3Д - Софт Эйт Софт
Description: Узнайте как использовать CSS3DRenderer в интерактивных 3Д-веб-приложениях сделанных на Вердж3Д

# CSS3DRenderer

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

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

## Пример

`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, описанному ниже.

## Свойства

### # .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.

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

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