JSFiddle - React, Tailwind, and code Playground

by Cody Bennett

JavaScript

import { WebGLRenderer, PerspectiveCamera, Scene } from 'https://unpkg.com/three/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';
import { DOMContext, DOMElement } from 'https://unpkg.com/three-dom-elements/dist/index.module.js';

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);
});