JSFiddle - React, Tailwind, and code Playground

by hokuma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/js/postprocessing/OutlinePass.js"></script>
<canvas id="view"/>

JavaScript

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#view')
});
const composer = new THREE.EffectComposer( renderer );

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 5);
camera.position.z = 2;

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const box1 = new THREE.Mesh(geometry, material);
box1.position.x = -0.5;
scene.add(box1);

const box2 = new THREE.Mesh(geometry, material);
box2.position.x = 0.5;
scene.add(box2);

const renderPass = new THREE.RenderPass( scene, camera );
composer.addPass(renderPass);

const outlinePass1 = new THREE.OutlinePass(new THREE.Vector2(2, 1), scene, camera);
composer.addPass(outlinePass1);
outlinePass1.selectedObjects = [box1];

const outlinePass2 = new THREE.OutlinePass(new THREE.Vector2(2, 1), scene, camera);
composer.addPass(outlinePass2);
outlinePass2.selectedObjects = [box2];

function render(time) {
  time *= 0.001;  // convert time to seconds
 
  box1.rotation.x = time;
  box1.rotation.y = time;
 
  box2.rotation.x = -time;
  box2.rotation.y = -time;
  
  composer.render();
 
  requestAnimationFrame(render);
}
requestAnimationFrame(render);