JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

JavaScript

var camera, scene, renderer, controls;
var geometry, material;
var cube, object;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);
    camera.position.set(200, 200, 200);
    controls = new THREE.OrbitControls(camera);

    scene = new THREE.Scene();
	
	let light = new THREE.PointLight(0xffffff, 1, 0);
	light.position.set(0, 200, 0);
	scene.add(light);

    var geometry = new THREE.TorusGeometry(10, 3, 4, 100);
    var meshMaterial = new THREE.MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true } );
    var torus = new THREE.Mesh(geometry, meshMaterial);
    scene.add(torus);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

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