JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.5/pixi.min.js"></script>

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");


var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({canvas: canvas, context: gl });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 10;

const pixiRenderer = new PIXI.Renderer({ 
  antialias: true, 
  context: gl,
  transparent: true,
  resolution: 1,
  view: canvas,
  width: canvas.width,
  height: canvas.height,
  clearBeforeRender: false
});
renderer.autoClear = false;

const graphics = new PIXI.Graphics();
const container = new PIXI.Container();
container.addChild(graphics);

var animate = function () {
  requestAnimationFrame( animate );
  renderer.clear();

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  //renderer.state.reset();
  graphics.clear();
  graphics.beginFill(0xDE3249);
  graphics.drawRect(70* (Math.sin(performance.now() / 1000) + 1) , 200, 100, 100);
  graphics.endFill();
	console.log("?")
  renderer.render( scene, camera );
  renderer.state.reset();
  
  pixiRenderer.reset();
  pixiRenderer.render(container, undefined, false);
};

animate();