JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

html, body {
    padding: 0;
    margin: 0;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

body {
    height: 100vh;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);
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);

scene.add(new THREE.GridHelper(10, 10));

// lights
const light1 = new THREE.DirectionalLight(0xFFFFFF, 1);
light1.position.set(50, 200, 100);
scene.add(light1);
const light2 = new THREE.AmbientLight(0x666666);
scene.add(light2);

// geometry
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(-0.5, 0.75);
shape.lineTo(0, 1.5);
shape.lineTo(0.5, 0.75);
shape.lineTo(0, 0);

const extrudeSettings = {
  steps: 1,
  depth: 0.01,
  bevelEnabled: false,
}

// mesh
const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
const material = new THREE.MeshLambertMaterial({color: 0x23AE23});
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

mesh.rotation.y = Math.PI / 2;

// WHY DO THESE TWO LINES DO THE SAME?

// mesh.rotation.z = Math.PI / 4;
// mesh.rotation.x = Math.PI / 4;

function render() {
	requestAnimationFrame(render);
  renderer.render(scene, camera);
}

render();