JSFiddle - React, Tailwind, and code Playground

by Browork

HTML

<div id="app">
  <div id="left"> <canvas id="scene"></canvas></div>
  <div id="right">Config</div>
</div>

CSS

body {
  margin: 0;
  height:100vh;
}

#app{
    display: grid;
    grid-template-columns: 75% 25%;
    height: 100%;
    width: 100%;
}

#left{
  background-color:red;
}

#right{
  background-color:green;
}
canvas{
  height:100%;
  width:100%;
  display:block;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"

var bigBoxMaterial = new THREE.MeshBasicMaterial({
  vertexColors: true,
  transparent: true,
  opacity: 0.6,
  polygonOffset: true,
  polygonOffsetFactor: 0.75,
  polygonOffsetUnits: 4
});

var canvas = document.querySelector("#scene");
const width = canvas.clientWidth;
const height = canvas.clientHeight;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 2000);

camera.up.set(0, 0, 1);
camera.position.set(300, -200, 500);


var renderer = new THREE.WebGLRenderer({
	canvas:canvas,
  antialias: true,
  depth: true
});


renderer.setSize(width, height,false)
renderer.setClearColor("#f0ebdd", 1);

var controls;
function init() {
  controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', render);
  window.addEventListener('resize', render);
  createObjects();
  render();
}

function createObjects(){
 var axesHelper = new THREE.AxesHelper(50000);
  scene.add(axesHelper);
  let bigBox = createBigBox();
  scene.add(bigBox);
  bigBox.position.set(300, 200, 10);
}

function createBigBox() {
  const segments = 1;
  const boxGeo = new THREE.BoxBufferGeometry(
    600,
    400,
    20,
    segments,
    segments
  );
  const boxMesh = new THREE.Mesh(boxGeo, bigBoxMaterial);
  return boxMesh;
}



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

function windowResizeHandler() {
		const width = canvas.clientWidth;
		const height = canvas.clientHeight;
		camera.aspect = width / height;
		camera.updateProjectionMatrix();
		renderer.setSize(width, height, false);	
		render();
	}

	window.addEventListener('resize', windowResizeHandler, false);
  
init();