JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/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

// Simple three.js example

var mesh, renderer, myRealScene, camera, controls;

init();
animate();

function init() {
  // scene that we got from a loader, gltf in my case
  var sceneFromFile = new THREE.Scene();
  sceneFromFile.add(new THREE.AmbientLight(0x222222));
  sceneFromFile.add(new THREE.AxesHelper(20)); // take note of this axis
  var geometry = new THREE.SphereGeometry(5, 12, 8);
  var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    flatShading: true,
    transparent: true,
    opacity: 0.7,
  });
  mesh = new THREE.Mesh(geometry, material);
  sceneFromFile.add(mesh);

  // set up my real scene
  myRealScene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);
  controls = new THREE.OrbitControls(camera);
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  myRealScene.add(light);

  // add the things from the file i loaded
  for (var i = 0; i < sceneFromFile.children.length; i += 1) {
    myRealScene.add(sceneFromFile.children[i]);
  }
  // where is my axis?
}

function animate() {

  requestAnimationFrame(animate);

  //controls.update();

  renderer.render(myRealScene, camera);

}