JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
			"three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// three.js - Isometric Projection using an Orthographic Camera

import * as THREE from 'three';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

let renderer, scene, camera;

init();
render();

function init() {

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
	const aspect = window.innerWidth / window.innerHeight;
	const d = 20;
	camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );

	// /////////////////////////////////////////////////////////////////////////

	// method 1 - use lookAt
		//camera.position.set( 20, 20, 20 );
		//camera.lookAt( scene.position );

	// method 2 - set the x-component of rotation
		camera.position.set( 20, 20, 20 );
		camera.rotation.order = 'YXZ';
		camera.rotation.y = - Math.PI / 4;
		camera.rotation.x = Math.atan( - 1 / Math.sqrt( 2 ) );

	// /////////////////////////////////////////////////////////////////////////

	// controls
	const controls = new OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render );
	controls.enableZoom = false;
	controls.enablePan = false;
	controls.maxPolarAngle = Math.PI / 2;

	// ambient
	scene.add( new THREE.AmbientLight( 0x444444 ) );

	// light
	const light = new THREE.PointLight( 0xffffff, 0.8 );
	light.position.set( 0, 50, 50 );
	scene.add( light );

	// axes
	scene.add( new THREE.AxesHelper( 40 ) );

	// grid
	const geometry = new THREE.PlaneGeometry( 100, 100, 10, 10 );
	const material = new THREE.MeshBasicMaterial( { wireframe: true, opacity: 0.5, transparent: true } );
	const grid = new THREE.Mesh( geometry, material );
	grid.rotation.order = 'YXZ';
	grid.rotation.y = - Math.PI / 2;
	grid.rotation.x = - Math.PI / 2;
	scene.add( grid );

	// geometry
	const geometry2 = new THREE.BoxGeometry( 10, 10, 10 );

	// material
	const material2 = new...