JSFiddle - React, Tailwind, and code Playground

by rocket5tim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

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

JavaScript

// Two Scenes with the Second One on Top
// Three.js r.69

var mesh, renderer, scene, camera;
var controls;

init();
animate();

function init() {

    // info
    info = document.createElement( 'div' );
    info.style.position = 'absolute';
    info.style.top = '30px';
    info.style.width = '100%';
    info.style.textAlign = 'center';
    info.style.color = '#fff';
    info.style.backgroundColor = 'transparent';
    info.style.zIndex = '1'; // renderer domElement covers it up
    info.style.fontFamily = 'Monospace';
    info.innerHTML = 'Drag mouse to rotate camera - Example of two scenes, the second always on top';
    document.body.appendChild( info );

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.autoClear = false;

    // scene
    scene = new THREE.Scene();
    scene2 = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 
        40, 
        window.innerWidth / window.innerHeight, 
        1, 
        10000 
    );
    camera.position.set( 0, 2, 5 );

    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // soft white light
  scene2.add(ambientLight)
    
    // geometry
    var geometry = new THREE.PlaneGeometry( 2, 2, 1, 1 );
    
    // material
    var material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        side: THREE.DoubleSide
    });
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set( 0, 0, 0 );
    scene.add( mesh );
                    
    // axes
    var axes = new THREE.AxisHelper( 100 ); // this will be on top
    scene2.add( axes );
    
  const backgroundCube = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({
      color: 'blue'
    })
  )
  //backgroundCube.position.z =...