JSFiddle - React, Tailwind, and code Playground

by grano

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';

import { EffectComposer } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/UnrealBloomPass.js';
import { ShaderPass } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/postprocessing/ShaderPass.js';
import { BlendShader } from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/shaders/BlendShader.js';

var scene, camera, renderer, container, target1, target2;

var composer1, composer2, blendComposer;

window.addEventListener( 'resize', onWindowResize, false );

var perspective = window.innerWidth / window.innerHeight;

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.autoClear = false;

  container = document.createElement('div');
  document.body.appendChild( container );
  container.appendChild( renderer.domElement );

  scene  = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 90, perspective, 0.1, 3000 );
  camera.position.z = 100;
  camera.layers.enable(1); 
  camera.layers.enable(2); 

  var obj0 = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 4), new THREE.MeshLambertMaterial({color: "aqua", wireframe: false}));
  obj0.position.z = 50; 
  obj0.layers.enable(0);
  obj0.position.x = 80;
  obj0.position.y = 20;
  scene.add(obj0);


  var obj = new THREE.Mesh(new THREE.BoxGeometry(5,...