beta-2024/public/js/main.js

	import * as THREE from 'three'
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
	import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
	import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
	import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

	let scene, camera, renderer
	let aspect, frustumSize
	let time = 0
	let lastTime = 0
	let controls
	let mesh
	let composer
	let pixelSize = 8
	let container_element = document.getElementById('container-index')

	let cFrames = 0;
	let isCapturing = false;
	const totalCFrames = 600; // Number of frames to capture
	const zip = new JSZip(); // Create a new JSZip instance
	let captureFrames = false;
	
	let containerW = container_element.offsetWidth
	let containerH = container_element.offsetHeight

	const texture = new THREE.TextureLoader().load("public/images/main-txt.png")
	texture.minFilter = THREE.NearestFilter
	texture.colorSpace = THREE.SRGBColorSpace;
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;


	function init(){
		SetupRenderer()
		scene = new THREE.Scene()
		SetupCamera()
		SetupControls()

		composer = new EffectComposer( renderer );
		if (window.innerWidth <= 1024)
		{
			pixelSize = 4;
		}
		const renderPixelatedPass = new RenderPixelatedPass( pixelSize, scene, camera );
        renderPixelatedPass.normalEdgeStrength = 0;
        renderPixelatedPass.depthEdgeStrength = 1;
        renderPixelatedPass.pixelAlignedPanning = false;
		composer.addPass( renderPixelatedPass );

		const outputPass = new OutputPass();
		composer.addPass( outputPass );
		
		AddLights()
		
		const geom = new THREE.BoxGeometry(1, 1, 1)
		const mat = new THREE.MeshPhongMaterial({map: texture})
		mesh = new THREE.Mesh(geom, mat)
		scene.add(mesh)
		animate()
	}

	function SetupRenderer(){
		renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
		renderer.setClearColor(0xffffff, 0);
		renderer.setSize(containerW, containerH)
		document.getElementById('container-index').appendChild(renderer.domElement)
	}

	function SetupCamera(){
		aspect = (containerW) / (containerH)
		
		frustumSize = 1.75 / aspect
		camera = new THREE.OrthographicCamera(
			frustumSize * aspect / -2,
			frustumSize * aspect / 2,
			frustumSize / 2,
			frustumSize / -2,
			0.01,
			5000
		)
		
		camera.position.x = 5
		camera.position.set(0, 0, 20)
	}

	function SetupControls(){
		controls = new OrbitControls(camera, renderer.domElement)
		controls.enableRotate = false;
		controls.enablePan = false
		controls.zoomToCursor = false;
		controls.mouseButtons = {
			RIGHT: THREE.MOUSE.ROTATE,
			MIDDLE: THREE.MOUSE.DOLLY,
			LEFT: THREE.MOUSE.PAN
		}
		
		controls.update()
	}

	function AddLights() {
		// Add Ambient Light
		const ambientLight = new THREE.AmbientLight(0xffffff, 4); // Soft white light
		scene.add(ambientLight);
	
		// Add Directional Light
		const directionalLight = new THREE.DirectionalLight(0xffffff, 0); // Soft white light
		directionalLight.position.set(-5, 0, 5).normalize();
		scene.add(directionalLight);
	}

	function animate(){
		requestAnimationFrame(animate)
		const deltaTime = (time - lastTime) / 1000
		lastTime = time
		//controls.update()
		// Rotate the mesh on the x and z axes
		mesh.rotation.x += 0.001
		mesh.rotation.z += 0.001
		mesh.rotation.y += 0.001
		mesh.position.x = 0;
		mesh.position.y = 0;
		//texture.offset.x += 0.001;
		composer.render()
		//renderer.render(scene, camera)
		if (captureFrames && cFrames < totalCFrames) {
			captureFrame();
		}
	}

	function getContainerDimensions(){
		containerW = container_element.offsetWidth
		containerH = container_element.offsetHeight
	}

	window.addEventListener('resize', () => {
		getContainerDimensions()
		aspect = (containerW) / (containerH)
		camera.left = -frustumSize * aspect / 2
		camera.right = frustumSize * aspect / 2
		camera.top = frustumSize / 2
		camera.bottom = -frustumSize / 2
		camera.updateProjectionMatrix()
		renderer.setPixelRatio(window.devicePixelRatio)
		renderer.setSize(containerW, containerH)
	})

// Function to capture the canvas and save it as PNG data in the zip
function captureFrame() {
const canvas = renderer.domElement;
canvas.toBlob((blob) => {
        // Add the blob to the ZIP archive
        zip.file(`frame-${cFrames}.png`, blob);
        cFrames++;

        // If all frames are captured, zip and download
        if (cFrames >= totalCFrames) {
            zipAndDownload();
        }
    }, 'image/png');
}

// Function to zip and download the frames
function zipAndDownload() {
    zip.generateAsync({ type: 'blob' }).then(function (content) {
        // Create a download link for the zip file
        const link = document.createElement('a');
        link.href = URL.createObjectURL(content);
        link.download = 'frames.zip';
        link.click();
    });
}

// Event listener for the spacebar key press
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') { // Check if spacebar is pressed
      isCapturing = !isCapturing; // Toggle capturing

      if (isCapturing) {
        captureFrames = true
        console.log('Capture started...');
      } else {
        captureFrames = false
        cFrames = 0; // Reset frame counter
        console.log('Capture paused...');
      }
    }
  });


	init()