JSFiddle - React, Tailwind, and code Playground

by felixmariotto

HTML

<script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.123.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three-rt-helper@0.0.5"></script>

CSS

body {
  margin: 0;
}

JavaScript

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const controls = new THREE.OrbitControls( camera, renderer.domElement );

const renderTarget = new THREE.WebGLRenderTarget(
	window.innerWidth,
	window.innerHeight
);

const originalRenderTarget = renderer.getRenderTarget();

const helper = RenderTargetHelper( renderer, renderTarget );
document.body.appendChild( helper );

//

const box = new THREE.Mesh(
	new THREE.BoxBufferGeometry(),
  new THREE.MeshNormalMaterial()
);

box.layers.set( 1 );

const cone = new THREE.Mesh(
	new THREE.ConeBufferGeometry(),
  new THREE.MeshNormalMaterial()
);

cone.layers.set( 2 );

scene.add( box, cone );

//

const animate = function () {

  requestAnimationFrame( animate );
  
  //
  
  camera.layers.set( 1 );
  
	renderer.setRenderTarget( renderTarget );
	renderer.clear();
	renderer.render( scene, camera );
  
  helper.update();
  
  //
  
  camera.layers.set( 2 );
  
  renderer.setRenderTarget( originalRenderTarget );
	renderer.clear();
  renderer.render( scene, camera );
  
};

animate();