JSFiddle - React, Tailwind, and code Playground

by seanwasere

HTML

<!--
Threejs Boilerplate : https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate
Threejs Course : https://sbcode.net/threejs/
Discount Coupons : https://sbcode.net/coupons#threejs
-->

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://cdn.skypack.dev/three@0.142.0/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.142.0/",      
      "dat.gui": "https://cdn.skypack.dev/dat.gui"
		}
	}
</script>

CSS

body {
  overflow: hidden;
  margin: 0px;
}

JavaScript

import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'


const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

controls.target.set(1, -1, -1)
controls.update()
camera.position.set(1, -1, -1.1)
controls.enableZoom = false
controls.enableDamping = true

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(3, 3, 3, 10, 10, 10),
  new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
  })
)
scene.add(cube)

window.addEventListener('resize', onWindowResize, false)

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  render()
}

const stats = Stats()
document.body.appendChild(stats.dom)

function animate() {
  requestAnimationFrame(animate)

  controls.update()

  render()

  stats.update()
}

function render() {
  renderer.render(scene, camera)
}

animate()