JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js"></script>
<script src="https://pixijs.download/dev-fix-reset/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<canvas id="myCanvas"></canvas>

JavaScript

/* pixi-v4-dev & three-v78 */

var stats = new Stats();
stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.domElement )



var canvas = {
	el: document.getElementById('myCanvas'),
	width: 512,
	height: 512,
	pixelRatio: 1
}

/* 1. Three */
var scene, camera, lights = {}, material, object, renderer3D, renderTarget;

scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(canvas.width / -2, canvas.width / 2, canvas.height / 2, canvas.height / -2, -1000, 1000);
lights.ambient = new THREE.AmbientLight(0xffe1dd, 1);
lights.point = new THREE.PointLight(0xffffff, 1, 0);
lights.point.position.z = 500;
scene.add(lights.ambient);
scene.add(lights.point);
material = new THREE.MeshPhongMaterial({color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, autoClear: false});
material.flatShading = true
object = new THREE.Mesh(new THREE.DodecahedronGeometry(120, 1), material);
scene.add(object);
renderer3D = new THREE.WebGLRenderer({canvas: canvas.el, alpha: true});
renderer3D.setPixelRatio(canvas.pixelRatio);
renderer3D.setSize(canvas.width, canvas.height);

/* 2. Pixi */
var container, renderer2D, blurFilter, sprite3D;
var bg = new PIXI.Container();

container = new PIXI.Container();
blurFilter = new PIXI.filters.BlurFilter();
//container.filters = [blurFilter];
renderer2D = PIXI.autoDetectRenderer(canvas.width, canvas.height, {
	context: renderer3D.context, // shared context with threejs
	view: canvas.el,
	resolution: canvas.pixelRatio,
	transparent: true,
});

var bunnyTexture = PIXI.Texture.fromImage('https://use-the-platform.com/webp/images/1');
var bunny = new PIXI.Sprite(bunnyTexture);
bunny.anchor.x = bunny.anchor.y = 0.5;
bunny.position.x = canvas.width / 2;
bunny.position.y = canvas.height / 2;
bunny.scale.set(0.2)
container.addChild(bunny);

// --------------------------------------
let count = 0

function raf() {
	if (count > 3) return
	//count++

	stats.begin();
	
	//...