JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>
JavaScript
let camera, scene, renderer, stats;
let mesh;
const amount = parseInt(window.location.search.substr(1)) || 10;
const count = Math.pow(amount, 3);
const dummy = new THREE.Object3D();
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();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
mesh = new THREE.InstancedMesh(geometry, material, count);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // will be updated every frame
scene.add(mesh);
setTimeout( function() {
mesh.geometry.dispose();
mesh.material.dispose();
mesh.geometry = new THREE.TetrahedronGeometry();
mesh.material = new THREE.MeshBasicMaterial();
}, 2000 );
//
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);
}
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) {
const time = Date.now() * 0.001;
mesh.rotation.x = Math.sin(time / 4);
mesh.rotation.y = Math.sin(time / 2);
let i = 0;
const offset = (amount - 1) / 2;
for (let x = 0; x < amount; x++) {
for (let y = 0; y < amount; y++) {
for (let z = 0; z < amount; z++) {
dummy.position.set(offset - x, offset - y, offset - z);
dummy.rotation.y = (Math.sin(x / 4 + time) + Math.sin(y / 4 + time) + Math.sin(z / 4 + time));
...