JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<canvas id="main_canvas" style="width:500px;height:300px;border:1px solid #774777;background:rgba(0,0,0,1.0);"></canvas>

    <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>

CSS

body {
  background: #112233;
}

JavaScript

// THREE globals

 let scene, renderer, camera;

 init();

 function init() {

   // scene

   scene = new THREE.Scene();
   scene.background = new THREE.Color().setHex(0);

   // renderer

   renderer = new THREE.WebGLRenderer({
     canvas: document.getElementById('main_canvas'),
     antialias: true
   });

   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(500, 300, false);

   camera = new THREE.OrthographicCamera(-250, 250, 150, -150, 1, 100);
   
   const cube = new THREE.Mesh(
     new THREE.BoxBufferGeometry(50, 50, 50, 1, 1, 1),
     new THREE.MeshPhongMaterial({
       color: 0xffff00
     })
   );
   cube.position.set(0, 0, -60);
   cube.rotation.x = 0.2;
   cube.rotation.y = 0.4;
   
   const cube2 = cube.clone();
   cube2.material = cube.material.clone();
   cube2.material.color = new THREE.Color().setHex(0xff00ff); 
   
   //cube.matrix = new THREE.Matrix4();
   //cube.matrix.set(1,0,0,50, 0,1,0,0, 0,0,1,0, 0,0,0,1);
   
   const matrix = new THREE.Matrix4();
   matrix.set(1,0,0,80, 0,1,0,0, 0,0,1,0, 0,0,0,1);
   cube.applyMatrix4(matrix);
   
   const light = new THREE.DirectionalLight(0xffffff, 1);
   light.position.set(20,30,100);

   scene.add(cube);
   scene.add(cube2);
   scene.add(light);

   render();
 }


 function render() {

   renderer.render(scene, camera);
 }