JSFiddle - React, Tailwind, and code Playground

by Browork

JavaScript

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

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 2000);
camera.position.set(0, 50, 10);
var renderer = new THREE.WebGLRenderer({antialias : true, stencil:true,logrithmicDepthBuffer: true});
renderer.setSize(innerWidth, innerHeight)
renderer.setClearColor("#f0ebdd", 1);
document.body.appendChild(renderer.domElement);

const boxMat = new THREE.MeshBasicMaterial(
{
color: 0xb89349,
transparent: true,
opacity: 0.8,
polygonOffset: true,
  polygonOffsetFactor: 0.75,
  polygonOffsetUnits : 4
});

const edgeMat = new THREE.MeshBasicMaterial(
{
color: 0x000000,
  polygonOffset: false,
  polygonOffsetFactor: -0.75,
  polygonOffsetUnits : -4
}); 




const cylinderMat = new THREE.MeshBasicMaterial(
{
vertexColors: true,
  polygonOffset: false,
  polygonOffsetFactor: -0.75,
  polygonOffsetUnits : -2
});


const smallBoxMat = new THREE.MeshBasicMaterial(
{
	vertexColors: true,
  polygonOffset: false,
  polygonOffsetFactor: -0.5,
  polygonOffsetUnits : -2
});




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



//
//MainBox
//

const boxGeo = new THREE.BoxBufferGeometry(600,20,400);


const boxMesh = new THREE.Mesh(boxGeo, boxMat);


const edgeGeoBox = new THREE.EdgesGeometry(boxGeo);
const edgesBox = new THREE.LineSegments(edgeGeoBox, edgeMat);

scene.add(boxMesh);
boxMesh.add(edgesBox);

//
//cylinder
//

const cylinderGeo = new THREE.CylinderBufferGeometry(4, 4, 20, 16,1);

const p = cylinderGeo.getAttribute("position");
const colors = [];
for (let i = 0; i <34; i++) {
  colors.push(1, 0, 0);
}
for (let i =34; i < p.count; i++) {
  colors.push(0, 1,...