JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<script src="http://threejs.org/build/three.min.js"></script>

CSS

canvas { width: 100%; height: 200px }

JavaScript

var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
//radius, tube, segmentsR, segmentsT, arc 
  var torus = new THREE.TorusGeometry( 1.5, 0.3, 16, 32 );
// radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength
  var sphere = new THREE.SphereGeometry( 0.3, 16, 16 );
//new THREE.CubeGeometry(1, 1, 1);
  var material = new THREE.MeshNormalMaterial({
      color: 0x00ffff
  });


material = new THREE.MeshPhongMaterial({
        // light
        specular: '#ffffff',
        // intermediate
        color: '#ffffff',
        // dark
        emissive: '#000000',
        shininess: 100 
      });



var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); directionalLight.position.set( 0, 10, 10 ); scene.add( directionalLight );

  var torusMesh = new THREE.Mesh(torus, material);
 var sphereMesh = new THREE.Mesh(sphere, material);
  scene.add(torusMesh);
  scene.add(sphereMesh);
  camera.position.z = 5;
  var render = function () {
      requestAnimationFrame(render);
      torusMesh.rotation.x += 0.006;
      torusMesh.rotation.y += 0.009;
      renderer.render(scene, camera);
  };

  render();