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 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)
	}

	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)
	})


	init()