Cube are looking like a rectangle

Questions
1

Hi everyone

import  * as THREE from "three"

console.log(THREE)

const canvas=document.querySelector(".webgl");

const scene=new THREE.Scene()

const geometry=new THREE.BoxGeometry(1,1,1)
const material=new THREE.MeshBasicMaterial({color:"dodgerblue"})

const mesh=new THREE.Mesh(geometry, material)

scene.add(mesh)

const sizes={
    width:800,
    height:600
}




const aspectRatio=sizes.width/sizes.height

//const camera=new THREE.PerspectiveCamera(75,sizes.width / sizes.height, 1, 100)
const camera=new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,1,-1 ,0.1,1000)

camera.position.z=2

const renderer=new THREE.WebGLRenderer({
    canvas
})

const clock=new THREE.Clock()


const cx=()=>{

    const elapsedTime=clock.getElapsedTime()

    mesh.rotation.y = elapsedTime 
    renderer.render(scene, camera)
    window.requestAnimationFrame(cx)
}

cx()

renderer.setSize(sizes.width, sizes.height)
2

the animation is working fine but the cube is looking like a rectangle

not a cube in the course when we add aspect ratio in OrthographicCamera it looking as a cube

1 Like
3

4

That’s because there’s no light and it has the same diffuse color from all angles. Use a material that responds to light and add a light to the scene, then it makes more sense.

1 Like
5

ok thanks for your message

6

The aspect ratio provided for the cameras needs to match the ratio of the canvas. Your code will work w/o stretching only if you get the size from the canvas, not set it separately.
In your case, since you provide your own canvas to the renderer, it’s better to write:

const sizes = {
    width: canvas.width,
    height: canvas.height
}