Three.js Mixing CSS and WebGL

by JohannesDeml

HTML

<div id="css"></div>
<div id="webgl"></div>

CSS

body {
	  margin: 0;
}

#css, #webgl {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js'
import { CSS3DRenderer, CSS3DObject } from 'https://unpkg.com/three/examples/jsm/renderers/CSS3DRenderer.js';
import { TrackballControls } from 'https://unpkg.com/three/examples/jsm/controls/TrackballControls.js';

var camera, webglscene, webglrenderer;
var cssscene, cssrenderer;
var controls;
var geometry, material, mesh;

init();
animate();

function createYoutubeVideo ( id, x, y, z, ry ) {

  var div = document.createElement( 'div' );
  div.style.width = '480px';
  div.style.height = '360px';
  div.style.backgroundColor = '#fff';

  var iframe = document.createElement( 'iframe' );
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  iframe.style.border = '0px';
  iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );
  div.appendChild( iframe );

  var cssobject = new CSS3DObject( div );
  cssobject.position.set( x, y, z );
  cssobject.rotation.y = ry;
  cssobject.scale.set(0.01, 0.01, 0.01);

  cssscene.add(cssobject);

  var material = new THREE.MeshPhongMaterial({
    opacity	: 0.0,
    color	: new THREE.Color('black'),
    blending: THREE.NoBlending,
    side	: THREE.DoubleSide,
  });
  
  var geometry = new THREE.PlaneGeometry( 480, 360 );
  var webglrepresentation = new THREE.Mesh( geometry, material );
  webglrepresentation.position.copy( cssobject.position );
  webglrepresentation.rotation.copy( cssobject.rotation );
  webglrepresentation.scale.copy( cssobject.scale );
  webglscene.add( webglrepresentation );
}

function init() {
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 100 );
  camera.position.z = 10;

  webglscene = new THREE.Scene();

  webglrenderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  webglrenderer.setClearColor( 0x000000, 0 );
  webglrenderer.setSize( window.innerWidth, window.innerHeight );
  document.querySelector('#webgl').appendChild( webglrenderer.domElement );

 ...