three-dom Example

https://npmjs.com/three-dom

by Cody Bennett

CSS

body {
  margin: 0;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
import { DOMContext, DOMElement } from 'https://unpkg.com/three-dom';

const { innerWidth, innerHeight } = window;

const renderer = new WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new PerspectiveCamera(45, innerWidth / innerHeight, 0.01, 10);
camera.position.z = 2;

const controls = new OrbitControls(camera, document.body);

const context = new DOMContext(camera);
context.setSize(innerWidth, innerHeight);
document.body.appendChild(context.domElement);

const scene = new Scene();

const iFrame = document.createElement('iframe');
iFrame.src = 'https://threejs.org';
iFrame.style.border = 'none';
const element = new DOMElement(context, iFrame);
scene.add(element);

const handleResize = () => {
  const { innerWidth, innerHeight } = window;

  renderer.setSize(innerWidth, innerHeight);
  context.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
};

window.addEventListener('resize', handleResize);

renderer.setAnimationLoop(() => {
  controls.update();
  context.update();

  renderer.render(scene, camera);
});