JSFiddle - React, Tailwind, and code Playground

by nickcoutsos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<body>
<div id="app"></div>
<button id="button">
Render
</button>
</body>

CSS

html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: dimgray;
}

#app {
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(45deg, darkgray 26%, transparent 26%),
    linear-gradient(-45deg, darkgray 26%, transparent 26%),
    linear-gradient(45deg, transparent 76%, darkgray 76%),
    linear-gradient(-45deg, transparent 74%, darkgray 74%);
  background-size: 100px 100px;
  background-position: 0 0, 0 50px, 50px -50px, -50px 0px;
}

#app canvas {
  display: block;
}

#button {
  position: absolute;
  top: 30px;
  right: 30px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border-color: red;
  background-color: red;
  color: white;
}

JavaScript 1.7

const container = document.querySelector('#app')
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
const scene = new THREE.Scene()

renderer.shadowMap.enabled = true
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)
container.appendChild(renderer.domElement)
window.addEventListener('resize', resize)

const ambientLight = new THREE.AmbientLight('powderblue', .8)
const directionalLight = new THREE.DirectionalLight('white', 1)
const highlight = new THREE.PointLight('white', .5)

directionalLight.position.set(5, 5, 5)
directionalLight.castShadow = true
directionalLight.lookAt(0, 0, 0)
highlight.position.set(-5, 5, 5)

camera.position.set(5, 5, 5)
camera.lookAt(new THREE.Vector3(0, 0, 0))

scene.add(
  camera,
  directionalLight,
  ambientLight,
  highlight
)

const box = new THREE.Mesh(
	new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({
    color: 'red',
    transparent: true,
    opacity: 0.5
  })
)

const secondBox = new THREE.Mesh(
	new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({
    color: 'red',
    transparent: false
  })
)
secondBox.position.set(-2, 0, 2)
secondBox.visible = false

scene.add(box, secondBox)

function resize () {
  const { width, height } = container.getBoundingClientRect()

  renderer.setSize(width, height)
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.render(scene, camera)
}

resize()


document.querySelector('#button').addEventListener('click', () => {
console.log('render')
	renderer.render(scene, camera)
})