JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<div class="container"></div>

CSS

body { margin: 0; }
canvas { display: block; }

.container {
  height: 100px;
  width: 100px;
  border: solid thin red;
}

JavaScript

var scene = new THREE.Scene();
/* var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); */
var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( 100, 100 );
document.getElementsByClassName('container')[0].appendChild( renderer.domElement );

var geometry = new THREE.RingGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
	requestAnimationFrame( animate );
  
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  
	renderer.render( scene, camera );
}

animate();