JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js"></script>

<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/OutlinePass.js"></script>

<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var container, stats;
var camera, scene, renderer, controls, backgroundScene, backgroundCamera;
var raycaster = new THREE.Raycaster();

var mouse = new THREE.Vector2();
var selectedObjects = [];

var composer, effectFXAA, outlinePass;

function init() {

  backgroundCamera = new THREE.OrthographicCamera(
    -1, 1, 1, -1, -1, 0);

  backgroundScene = new THREE.Scene()

  const fragmentShader = `
    void main()	{
      gl_FragColor = vec4(0.7, 0, 0, 1.);
    }
  `
  
  backgroundScene.add(new THREE.Mesh(
    new THREE.PlaneBufferGeometry(2, 2), 
    new THREE.ShaderMaterial({
    fragmentShader
  })));

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

	var width = window.innerWidth;
	var height = window.innerHeight;

	renderer = new THREE.WebGLRenderer();
	renderer.shadowMap.enabled = true;

	renderer.setSize( width, height );
  //renderer.autoClear = false
  
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
	camera.position.set( 0, 0, 8 );

	controls = new THREE.OrbitControls( camera, renderer.domElement );
	scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.2 ) );

	var light = new THREE.DirectionalLight( 0xddffdd, 0.6 );
	light.position.set( 1, 1, 1 );
	scene.add( light );
	
	var geometry = new THREE.TorusBufferGeometry( 1, 0.3, 16, 100,2 );
	var material = new THREE.MeshPhongMaterial( { color: 0xffaaff } );
	var torus = new THREE.Mesh( geometry, material );
	torus.position.z = - 4;
	scene.add( torus );
  
  console.log(torus)

	composer = new THREE.EffectComposer( renderer );
  
  var backgroundPass = new THREE.RenderPass(
  	backgroundScene, 
    backgroundCamera);
    
	composer.addPass( backgroundPass );
  
  //backgroundPass.clear = false

	var renderPass = new THREE.RenderPass( scene, camera );
	composer.addPass( renderPass );
  
  renderPass.clear = false

	outlinePass = new THREE.OutlinePass( 
  	new THREE.Vector2( 
...