Working Isometric cube for Packing

by jonjieviduya

HTML

<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>
	
	<canvas class="no-overstack"></canvas>
</div>

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',
		'no-overstack',
		'no-understack'
	]
  
	if(allowedAngles.indexOf(angle) < 0) {
		console.log("Angle is incorrect")
		return false
	}

	const canvas = (typeof selector == 'string') ? document.querySelector(selector) : 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
	)

	cameraZoom = 40 / maxSize
	
	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...