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 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 ); const renderPixelatedPass = new RenderPixelatedPass( 8, 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(window.innerWidth, window.innerHeight) document.getElementById('container').appendChild(renderer.domElement) } function SetupCamera(){ aspect = (window.innerWidth) / (window.innerHeight) frustumSize = 2 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 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 = 1; mesh.position.y = -0.1; //texture.offset.x += 0.001; composer.render() //renderer.render(scene, camera) } window.addEventListener('resize', () => { aspect = (window.innerWidth) / (window.innerHeight) 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(window.innerWidth, window.innerHeight) }) init()