JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

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

CSS

body {
  margin: 0;
}

canvas {
  display: block;
}

JavaScript

var camera, scene, renderer;

var mesh;
var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
var count = Math.pow( amount, 3 );
var dummy = new THREE.Object3D();
var matrix = new THREE.Matrix4();
var position = new THREE.Vector3();

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
	camera.position.set( amount * 0.9, amount * 0.9, amount * 0.9 );
	camera.lookAt( 0, 0, 0 );

	scene = new THREE.Scene();

	var loader = new THREE.BufferGeometryLoader();
	loader.load( 'https://threejs.org/examples/models/json/suzanne_buffergeometry.json', function ( geometry ) {

		geometry.computeVertexNormals();
		geometry.scale( 0.5, 0.5, 0.5 );

		var material = new THREE.MeshNormalMaterial();

		mesh = new THREE.InstancedMesh( geometry, material, count );
		mesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); // will be updated every frame
		scene.add( mesh );
		
		var i = 0;
		var offset = ( amount - 1 ) / 2;

		for ( var x = 0; x < amount; x ++ ) {

			for ( var y = 0; y < amount; y ++ ) {

				for ( var z = 0; z < amount; z ++ ) {

					dummy.position.set( offset - x, offset - y, offset - z );
					dummy.updateMatrix();

					mesh.setMatrixAt( i ++, dummy.matrix );

				}

			}

		}

	} );

	//

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	//

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

	requestAnimationFrame( animate );

	render();

}

function render() {

	if ( mesh ) {

		mesh.getMatrixAt( 3, matrix );
		
		position.setFromMatrixPosition( matrix ); // extract position...