JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>

<body>
    <canvas id="c"></canvas>
</body>
<script type="importmap">
    {
        "imports": {
        "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.161.0/three.module.js",
         "three/addons/": "https://unpkg.com/three@v0.161.0/examples/jsm/"
        }
     }
</script>

<script type="module" src="/tetrahedron.js"></script>
</html>

JavaScript

import * as THREE from 'three';

const scene = new THREE.Scene();

    const color = 0xffffff;
    const intensity = 3;
    const light = new THREE.DirectionalLight( color, intensity );
    light.position.set( - 1, 2, 4 );
    scene.add( light );


const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );

const geometry = new THREE.TetrahedronGeometry(1);
// Lambert Material is a lighter "Phong" as it renders lighting at the vertices.
const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
const tetrahedron = new THREE.Mesh(geometry, material);
scene.add(tetrahedron);

const phongMaterial = new THREE.MeshPhongMaterial({color: 0x00ff00})
const tetrahedron2 = new THREE.Mesh(geometry, phongMaterial);
scene.add(tetrahedron2);


tetrahedron.position.x = -2;
camera.position.z = 5;

function animate () {

    tetrahedron.rotation.x += 0.01;
    tetrahedron.rotation.y += 0.01;
    tetrahedron2.rotation.x += 0.01;
    tetrahedron2.rotation.y += 0.01;

    requestAnimationFrame(animate)

    renderer.render(scene, camera)
}

animate();