JSFiddle - React, Tailwind, and code Playground

by naonvl

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>
<link rel="stylesheet" href="main.css">

<img crossorigin="anonymous" id="wiki" src="https://cloud.leenkup.com/themes/cloudable/images/favicon/android-icon-192x192.png" width="192" height="192" />
<div id="renderer">
</div>
<br />
<div id="canvas_container">
  <canvas id="cnvs" height="512" width="512"></canvas>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  background: #000;
}

#wiki {
    display: none;
}

JavaScript

/**
 * FabricJS  
 **/

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

var text = new fabric.IText('Three.js\n', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px'   
});
canvas.add(text);

var imgElement = document.getElementById("wiki");
var imageinstance = new fabric.Image(imgElement, {
  angle: 0,
  left: 300,
  opacity: 1,
  cornerSize: 30,
});
canvas.add(imageinstance);

/**
 * ThreeJS
 **/
var containerHeight = "512";
var containerWidth = "512";
var camera, renderer, container, scene, texture, material, geometry;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);

/* Raycaster */
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var onClickPosition = new THREE.Vector2();

/**
 ** Renderer
 **/
 container = document.getElementById( "renderer" );
 renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize(window.innerWidth, window.innerHeight);
 camera.updateProjectionMatrix();
 container.appendChild( renderer.domElement ); 
/* 
 * End Renderer 
 */

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);
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);

function...