JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script type="module">

	import * as THREE from 'https://threejs.org/build/three.module.js';
  import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
  
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(2.5, 2.5, 10);
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  scene.add(new THREE.GridHelper(10, 10, 0x404040, 0x202020));
  
  var controls = new OrbitControls(camera, renderer.domElement);
  
  var angle = 35;
  var w = 1;
  var xVal = w / Math.tan(THREE.Math.degToRad(angle));
  
  var extrudeSettings = {
    steps: 1,
    depth: 1,
    bevelEnabled: false
  };
  
  var pointsA = [
  	new THREE.Vector2(),
    new THREE.Vector2(5, 0),
    new THREE.Vector2(5, w),
    new THREE.Vector2(xVal, w)
  ];
  
  var geomA = new THREE.ExtrudeBufferGeometry(new THREE.Shape(pointsA), extrudeSettings);
  var matA = new THREE.MeshBasicMaterial({color: 0x00ffff, wireframe: true});
  var meshA = new THREE.Mesh(geomA, matA);
  scene.add(meshA);
  
  var pointsB = [
  	new THREE.Vector2(),
    new THREE.Vector2(5, 0),
    new THREE.Vector2(5, -w),
    new THREE.Vector2(xVal, -w)
  ];
  
  var geomB = new THREE.ExtrudeBufferGeometry(new THREE.Shape(pointsB), extrudeSettings);
  var matB = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true});
  var meshB = new THREE.Mesh(geomB, matB);
  meshB.rotation.z = THREE.Math.degToRad(angle * 2);
  scene.add(meshB);
  
  renderer.setAnimationLoop(() => {
  	renderer.render(scene, camera);
  })

</script>

CSS

body {
  overflow: hidden;
  margin: 0;
}