JSFiddle - React, Tailwind, and code Playground

by jonjieviduya

HTML

<canvas class="square"></canvas>

CSS

canvas { width: 195px; height: 228px; }

JavaScript

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

function generateBox(boxDepth, boxWidth, boxHeight) {
  const canvas = document.querySelector('.square')
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
  const canvasWidth = canvas.getBoundingClientRect().width
  const canvasHeight = canvas.getBoundingClientRect().height
  
  const aspect = canvasWidth / canvasHeight
  const fov = 80
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  
  camera.position.z = Math.max(...[boxDepth, boxWidth, boxHeight]) + Math.min(...[boxDepth, boxWidth, boxHeight])

  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: 0x44aa88 })  // greenish blue

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

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

scene.add( wireframe )

  let rotationX = 0.50
  let rotationY = -0.50
  let rotationZ = 0.30
  
  cube.rotateX(rotationX)
  cube.rotateY(rotationY)
  //cube.rotateZ(rotationZ)
  
  wireframe.rotateX(rotationX)
  wireframe.rotateY(rotationY)
  //wireframe.rotateZ(rotationZ)
  
  renderer.render(scene, camera)


}

generateBox(72, 24, 48)