JSFiddle - React, Tailwind, and code Playground

by jonjieviduya

HTML

<div class="flex">
	<canvas class="no-overstack"></canvas>
	<canvas class="no-understack"></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 = [
    'no-overstack',
    'no-understack'
  ]

  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
  // console.log(camera.position)
  cameraZoom = 45 / maxSize //0.45
  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)
  //console.log(cube.position.z -= 25)

  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...