JSFiddle - React, Tailwind, and code Playground

by vas4oo

HTML

<button onclick="resize()">
press me
</button>

JavaScript

var camera, scene, renderer, i, xpos, objects, big = true;

init();
animate();

function resize(){
  for(let obj of objects){
  	obj.scale.multiplyScalar(big ? 0.5 : 2);
  }
  big = !big;
}

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);
		xpos = -350;
    objects = [];
    for(i=0; i<7; i++){
    	const geometry = new THREE.SphereGeometry( 50, 32, 16 );
      const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
      const sphere = new THREE.Mesh( geometry, material );
      sphere.position.setX(xpos);
      xpos+=120;
      objects.push(sphere)
      scene.add( sphere );
    }

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {
    renderer.render(scene, camera);

}