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 )
  
  function animate() {
  		requestAnimationFrame( animate )
	
		let rotationX = 0.50
	    let rotationY = -0.50
	    let rotationZ = 0.30

	    //cube.rotateX(rotationX)
	    //cube.rotateY(rotationY)
		cube.rotation.x = rotationX
		cube.rotation.y = rotationY
		
	    //cube.rotateZ(rotationZ)

	    //wireframe.rotateX(rotationX)
	    //wireframe.rotateY(rotationY)
	    //wireframe.rotateZ(rotationZ)
		wireframe.rotation.x = rotationX
		wireframe.rotation.y = rotationY

	    renderer.render(scene, camera)
  }
  
  
  animate()


}

generateBox(72, 24, 48)