JSFiddle - React, Tailwind, and code Playground

by nils_r

HTML

<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/RequestAnimationFrame.js"></script>
<div id="container"></div>

JavaScript

(function() {
  var camera, createSphere, draw, light, object, renderer, scene;
  renderer = new THREE.WebGLRenderer();
  camera = new THREE.PerspectiveCamera(45, 800 / 640, 0.1, 10000);
  camera.position.set(0,40,300);
  scene = new THREE.Scene();
  renderer.setSize(800, 640);
  document.getElementById("container").appendChild(renderer.domElement);
  createSphere = function(radius, segments, rings) {
    var material, sphere;
    if (radius == null) {
      radius = 50;
    }
    if (segments == null) {
      segments = 16;
    }
    if (rings == null) {
      rings = 16;
    }
    sphere = new THREE.SphereGeometry(radius, segments, rings);
    material = new THREE.MeshBasicMaterial({
      color: 0xCC000F,
      shading: THREE.SmoothShading,
      ambient: 0x555555,
      specular: 0xffffff
    });
    return new THREE.Mesh(sphere, material);
  };
  light = new THREE.SpotLight(0xffffff);
  light.position.x = 40;
  light.position.y = 140;
  light.position.z = 300;
  light.intensity = 0.7;
  object = createSphere();
  scene.add(new THREE.AmbientLight(0x0000F0));
  scene.add(light);
  scene.add(object);
    
  var cube1 =  new THREE.Mesh( new THREE.CubeGeometry( 5, 5, 5, 1, 1, 1, new THREE.MeshBasicMaterial({
      color: 0xCC000F,
      shading: THREE.SmoothShading,
      ambient: 0x555555,
      specular: 0xffffff
    })), new THREE.MeshFaceMaterial() );
        cube1.position.set(-50,10,10);
        scene.add( cube1 );
        var cube2 =  new THREE.Mesh( new THREE.CubeGeometry( 5, 5, 5, 1, 1, 1, new THREE.MeshBasicMaterial({
      color: 0xCC000F,
      shading: THREE.SmoothShading,
      ambient: 0x555555,
      specular: 0xffffff
    })), new THREE.MeshFaceMaterial() );
        cube2.position.set(60,20,10);
        scene.add( cube2 );
        var cube3 =  new THREE.Mesh( new THREE.CubeGeometry( 5, 5, 5, 1, 1, 1, new THREE.MeshBasicMaterial({
      color: 0xCC000F,
      shading: THREE.SmoothShading,
      ambient: 0x555555,
      specular: 0xffffff
    })),...