Cubes and cylinders

by Browork

HTML

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

CSS

body {
  overflow: hidden;
  margin: 0;
}

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 bigBoxMaterial = new THREE.MeshBasicMaterial({
			color: 0xb89349,
			transparent: true,
			opacity: 0.8,
			polygonOffset: true,
			polygonOffsetFactor: 0.75,
			polygonOffsetUnits: 4
		});
var cylinderMaterial = new THREE.MeshBasicMaterial({
				vertexColors: true,
				polygonOffset: false,
				polygonOffsetFactor: -0.75,
				polygonOffsetUnits: -2
			});
var boxMaterial = new THREE.MeshBasicMaterial({
				vertexColors: true,
				polygonOffset: false,
				polygonOffsetFactor: -0.5,
				polygonOffsetUnits: -2
			});
var edgeMaterial = new THREE.MeshBasicMaterial({
				color: 0x000000,
				polygonOffset: false,
				polygonOffsetFactor: -1,
				polygonOffsetUnits: -4
			});




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

	let bigBox = createBigBox();
  scene.add(bigBox);


    for (let i = 1; i <= 10; i++) {
        for (let j = 1; j <= 10; j++) {
            let radius = Math.floor(Math.random() * 10) + 1;
            let height = j*4;
            let x= -200+40*j;
            let y=-100+20*i;
            let z = 10-height/2
            let mesh;
            if(i%2==1){mesh = createCylinder( radius, height);}
            if(i%2==0){mesh = createBox(radius,height,10);}
           
						mesh.rotation.set(Math.PI/2,0,0)
           ...