beta-2024/public/js/article.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 container_element = document.getElementById('container-article')
	
	let containerW = container_element.offsetWidth
	let containerH = container_element.offsetHeight

	let imgW, imgH, imgRatio

	console.log(containerH, containerW)
	

	var clock = new THREE.Clock();


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

		composer = new EffectComposer( renderer );
		const renderPixelatedPass = new RenderPixelatedPass( 1.2, scene, camera );
        renderPixelatedPass.normalEdgeStrength = 1;
        renderPixelatedPass.depthEdgeStrength = 1;
        renderPixelatedPass.pixelAlignedPanning = false;
		composer.addPass( renderPixelatedPass );

		const outputPass = new OutputPass();
		composer.addPass( outputPass );
		
		AddLights()

		const textureLoader = new THREE.TextureLoader()
		textureLoader.crossOrigin = "Anonymous"
		const texture = textureLoader.load(imageUrl, function ( tex ) {
			// tex and texture are the same in this example, but that might not always be the case
			console.log( tex.image.width, tex.image.height );
			imgW = tex.image.width
			imgH = tex.image.height
			imgRatio = imgW / imgH

			tex.minFilter = THREE.NearestFilter
			tex.colorSpace = THREE.SRGBColorSpace;
			tex.wrapS = THREE.RepeatWrapping;
			tex.wrapT = THREE.RepeatWrapping;
			const geom = new THREE.PlaneGeometry(imgRatio, 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-article').appendChild(renderer.domElement)
	}

	function SetupCamera(){
		aspect = (containerW) / (containerH)
		frustumSize = 1.5
		camera = new THREE.OrthographicCamera(
			frustumSize * aspect / -2,
			frustumSize * aspect / 2,
			frustumSize / 2,
			frustumSize / -2,
			0.01,
			5000
		)

		camera.position.x = 5
	}

	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
		}
		camera.position.set(0, 0, 20)
		controls.update()
	}

	function AddLights() {
		// Add Ambient Light
		const ambientLight = new THREE.AmbientLight(0xffffff, 3); // 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
		controls.update()
		let sin = Math.sin(clock.getElapsedTime() * 0.5)
		mesh.rotation.z = sin * 0.1
		mesh.rotation.x = sin * 0.15
		composer.render()
	}

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