JSFiddle - React, Tailwind, and code Playground

by JohannesDeml

CSS

body {
	  margin: 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, scene, renderer;
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 = '#000';

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

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

  return object;

};

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

  scene = new THREE.Scene();

  geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  
  var video = createYoutubeVideo( 'SJOz3qjfQXU', 0, 0, 240, 0 );
  scene.add(video);

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  controls = new TrackballControls( camera, renderer.domElement );
  controls.rotateSpeed = 4;
}

function animate() {

  requestAnimationFrame( animate );

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  controls.update();
  renderer.render( scene, camera );

}