JSFiddle - React, Tailwind, and code Playground

by jonjieviduya

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ThreeJS with Sonar</title>
	<link rel="icon" href="#">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="flex">
		<canvas class="standard-0"></canvas>
		<canvas class="standard-90"></canvas>
		
		<canvas class="turn-up-0"></canvas>
		<canvas class="turn-up-90"></canvas>
		
		<canvas class="turn-side-0"></canvas>
		<canvas class="turn-side-90"></canvas>
	</div>

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

CSS

.flex {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
	gap: 20px;
}

canvas {
	width: 65px;
	height: 76px;
	border: solid #313131 1px;
	background: url('https://www.pier2pier.com/loadcalc/images/Spinner-1s-64px-gray.gif');
}

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'

function generate3DBox(selector, angle, boxDepth, boxWidth, boxHeight) {
	
	let allowedAngles = [
		'standard-0',
		'standard-90',
		'turn-up-0',
		'turn-up-90',
		'turn-side-0',
		'turn-side-90'
	]
  
	if(allowedAngles.indexOf(angle) < 0) {
		console.log("Angle is incorrect")
		return false
	}

	const canvas = document.querySelector(selector)
	const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })

	const canvasWidth = canvas.getBoundingClientRect().width
	const canvasHeight = canvas.getBoundingClientRect().height
	const minSize = Math.min(...[boxDepth, boxWidth, boxHeight])
	const maxSize = Math.max(...[boxDepth, boxWidth, boxHeight])
  
	const aspect = canvasWidth / canvasHeight
	const fov = 75
	const near = 0.1
	const far = 1000
  
	let cameraZoom = 1
	let cameraPosition = {
		left: canvasWidth / -2,
		right: canvasWidth / 2,
		top: canvasHeight / 2,
		bottom: canvasHeight / -2
	}

	const camera = new THREE.OrthographicCamera(
		cameraPosition.left,
		cameraPosition.right,
		cameraPosition.top,
		cameraPosition.bottom,
		near,
		far
	)

	camera.position.z = maxSize + minSize
	camera.zoom = cameraZoom

	camera.updateProjectionMatrix()

	const scene = new THREE.Scene()
	scene.background = new THREE.Color(0xe0e0e0)

	const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)

	const material = new THREE.MeshBasicMaterial({ color: 0xff4500 })  // greenish blue

	const cube = new THREE.Mesh(geometry, material)

	var edge = new THREE.EdgesGeometry(cube.geometry)
	var edgeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 1 })
	var wireframe = new THREE.LineSegments(edge, edgeMaterial)

	scene.add(cube, wireframe)

	function animate() {
		requestAnimationFrame(animate)

		let rotationX = 0
		let rotationY = 0
		let rotationZ = 0

		if(angle == 'standard-0') {
			rotationX = 0.60
			rotationY = -0.80
			rotationZ =...