JSFiddle - React, Tailwind, and code Playground

by Hesam Yavari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.1/fabric.min.js"></script>
<div id="container">
  <canvas id="cnvs" height="256" width="256"></canvas>
</div>

CSS

body {
  margin: 0px;
  background-color: #050505;
  color: #fff;
  overflow: hidden;
}

#container {
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 1));

var canvasTexture = new THREE.CanvasTexture(cnvs);
canvasTexture.wrapS = THREE.RepeatWrapping;
canvasTexture.wrapT = THREE.RepeatWrapping;
canvasTexture.repeat.set( 2, 2 );

var geometry = new THREE.PlaneGeometry(10, 10, 20, 20);
geometry.vertices.forEach(v => {
  v.z = Math.cos(v.x) * Math.sin(-v.y * 0.5) * 0.5;
});
geometry.computeFaceNormals();
geometry.computeVertexNormals();

var mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
  map: canvasTexture,
  metalness: 0.25,
  roughness: 0.25
}));
scene.add(mesh);

var canvas = new fabric.Canvas('cnvs', {
  backgroundColor: 'white'
});
canvas.on("after:render", function() {
  mesh.material.map.needsUpdate = true;
});

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 canvas.add(myIm); 
});

var rect = new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 128,
  stroke: '#aaf',
  strokeWidth: 5,
  fill: '#faa',
  selectable: false,
  originX: 'center',
  originY: 'center'
});
canvas.add(rect);
function animateRandom(){
  var randomX = THREE.Math.randInt(50, 206);
  var randomY = THREE.Math.randInt(50, 206);

  rect.animate({left: randomX, top: randomY}, {
    duration: 1000,
    onChange: canvas.renderAll.bind(canvas),
    easing: fabric.util.ease.easeOutExpo
  })
}

var text = new fabric.IText('Three.js\n+\nFaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
 ...