The title is self-explanatory.
The aspect ratio goes back to normal per refresh, which isn’t great of an option.
The code:
let scene, camera, renderer, cube;
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry( 2, 2, 2 );
const texture = new THREE.TextureLoader().load('memed-io-output (1).jpeg')
const material = new THREE.MeshBasicMaterial( {map: texture} );
cube = new THREE.Mesh( geometry, material );
scene.add(cube);
camera.position.z = 5;
}
function animate(){
requestAnimationFrame(animate);
cube.rotation.z += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
window.addEventListener('resize', () => {
camera.aspect = window.innerHeight / window.innerWidth;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
})
init();
animate();