JSFiddle - React, Tailwind, and code Playground

by Browork

HTML

<button style="position:absolute">Start</button>

JavaScript

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

 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 2000);
camera.position.set(100, 100, 500);
camera.up.set(0, 0, 1);
var c;
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: false,
    stencil: true,
    depth: true
});
renderer.setSize(innerWidth, innerHeight)
renderer.setClearColor("#f0ebdd", 1);
document.body.appendChild(renderer.domElement);
document.querySelector("button").addEventListener("click", () => {
    init();
})



var cylinderMaterial = new THREE.MeshBasicMaterial({
				vertexColors: true,
				polygonOffset: false,
				polygonOffsetFactor: -0.75,
				polygonOffsetUnits: -2
			});
var boxMaterial = new THREE.MeshBasicMaterial({
				vertexColors: true,
				polygonOffset: true,
				polygonOffsetFactor: 0.5,
				polygonOffsetUnits: 1
			});
var edgeMaterial = new THREE.MeshBasicMaterial({
				color: 0x000000,
				polygonOffset: true,
				polygonOffsetFactor: -0.75,
				polygonOffsetUnits: -4
			});




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

	



    
    

            addHierarchicalModel(0,0)
    				
            
     
		
  



    
    renderer.setAnimationLoop(() => {
    renderer.render(scene, camera);
    //console.log(renderer.info.render);
    })



}





function createCylinder(radius, scale){
		const segments = 16;
		const cylinderGeo = new THREE.CylinderBufferGeometry(radius, radius, scale, segments, 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, 0);
      colors.push(1, 0, 0);
		}
		cylinderGeo.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));


		const...