JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

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

CSS

body {
    background-color: #ffffff;
    margin: 0;
    overflow: hidden;
}

* {
    outline: none;
}

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

#css {
  background: #cccccc;
    transform:scale(1.0);
}

#webgl {
  pointer-events: none;
}

JavaScript

var camera, root, scene, renderer, renderer2, windowHalfX, windowHalfY;
var mouseX = 0, mouseY = 0;
var sphere;
var light
var lightMovementAmplitude = 200

init();
animate(performance.now());

function init() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera = new THREE.PerspectiveCamera(
        45, window.innerWidth / window.innerHeight, 0.1, 4000
    );
    camera.position.set( 0, 0, 500 );

    scene = new THREE.Scene()
    root = new THREE.Object3D()
    root.position.y = 10
    root.rotation.y = Math.PI / 3
    scene.add(root)
    
    const background = makeElementObject('div', 200, 200)
    
    background.css3dObject.element.style.background = new THREE.Color(
        Math.random() * 0.21568627451 + 0.462745098039,
        Math.random() * 0.21568627451 + 0.462745098039,
        Math.random() * 0.21568627451 + 0.462745098039,
    ).getStyle();
    background.css3dObject.element.textContent = "I am a <div> element! Edit me!"
    background.css3dObject.element.setAttribute('contenteditable', '');
    
    background.css3dObject.element.style.transform = 'scale(1.0)';
    root.add( background );
    
    const button = makeElementObject('button', 75, 20)
    
    button.css3dObject.element.style.background = new THREE.Color(
        Math.random() * 0.21568627451 + 0.462745098039,
        Math.random() * 0.21568627451 + 0.462745098039,
        Math.random() * 0.21568627451 + 0.462745098039,
    ).getStyle();
    button.css3dObject.element.style.border = '1px solid orange'
    button.css3dObject.element.textContent = "Click me!"
    button.css3dObject.element.addEventListener('click', () => alert('Button clicked!'))
    button.position.y = 10
    button.position.z = 10
    background.add(button)

    // make a geometry to see if we can clip it with the DOM elememt.
    ~function() {
        var material = new THREE.MeshPhongMaterial({
            color: 0x156289,
            emissive: 0x000000,
           ...