Serpinski Cube

by amitlzkpa

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin: 0px;
}

JavaScript

// Simple three.js example
// https://www.jsdelivr.com/package/npm/three

let renderer, scene, camera, controls;

init();
animate();
function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100000000 );
    camera.position.set( 800, 800, 800 );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    let light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20, 20, 0 );
    scene.add( light );
    scene.add( new THREE.AxesHelper( 20 ) );
    document.addEventListener('keypress', onKeyPress, true);
    window.addEventListener( 'resize', onWindowResize, false );
}

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

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}



// --------------------------------------




function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function getPointInBetweenByT(a, b, t=0.5) {
  let pp = new THREE.Vector3((a.x+b.x) * t, (a.y+b.y) * t, (a.z+b.z) * t);
  return pp;
}



// --------------------------------------



  
let shape = [
  new THREE.Vector3(-300,    0,    -300),
  new THREE.Vector3(300,    0,    -300),
  new THREE.Vector3(300,    0,    300),
  new THREE.Vector3(-300,    0,    300),
  new THREE.Vector3(-300,    600,    -300),
  new THREE.Vector3(300,    600,    -300),
  new THREE.Vector3(300,    600,    300),
  new THREE.Vector3(-300,    600,    300),
];
let t = 0.42;

let size = 600;
let focus = new THREE.Vector3(0, 400, 0);
function getCol(pRat) {
	return new THREE.Color(1.7 - pRat,...