JSFiddle - React, Tailwind, and code Playground

by Meir Meshi

HTML

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

JavaScript

var renderer, scene, camera, controls;

init();
animate();

function init() {
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 200;
    
    renderer = new THREE.WebGLRenderer();
    document.body.appendChild( renderer.domElement );
    renderer.setSize( window.innerWidth, window.innerHeight );
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    scene.add( new THREE.Mesh(new THREE.SphereGeometry(100, 30, 30), new THREE.MeshPhongMaterial( {
        color:  0xff0000,
        ambient : 0x000000,
        emissive : 0x000000,
        specular : 0x000000
    })));
    var light = new THREE.DirectionalLight();
    scene.add(light);
    
}

function animate() {
    
    requestAnimationFrame(animate);
    update()
    render();
    
}

function update() {
    
    controls.update();
    
}

function render() {
    
    renderer.render(scene, camera);
    
}