three-dom-elements

A lightweight three.js extension to integrate DOM elements into your scene.

Usage

The following projects an iFrame into a threejs scene as a plane. You can use this plane as normal with techniques like raycasting, etc.

View the live demo.

import { DOMContext, DOMElement } from 'three-dom-elements';

// Create a DOM context to draw with
const context = new DOMContext(camera);
context.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(context.domElement);

// Create an element to project
const element = document.createElement('iframe');
element.src = 'https://threejs.org';
element.style.border = 'none';

// Project it
const element = new DOMElement(context, element);
scene.add(element);