# OrthographicCamera

**URL:** <https://discourse.threejs.org/t/orthographiccamera/83904>\
**Category:** Questions\
**Created:** [June 11, 2025, 8:25pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904 "2025-06-11T20:25:19Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 11, 2025, 8:25pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/1 "2025-06-11T20:25:20Z")

</div>

Hi everyone

I write this  
 ![code](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/2/82ec111f2f96184f8c78d319deddf2d68f048d0a.jpeg)

I have nothing on the page

 ![rendu](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/b/8ba07b9436550002ab1ce6ed76ad5043e3cdd436.jpeg)

Before I reach this part on the course I use PerpectiveCamera thing was working fine now I just comment it and nothing appear on the screen

 ![12](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/3/63298fcb995d083b546124e8f76d57edbb0406c1.jpeg)

can I have some explication ?

thanks

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [June 11, 2025, 8:34pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/2 "2025-06-11T20:34:40Z")

</div>

looks like it should work.  
Does:  
camera.position.z = -2 change anything?

No errors in the console?

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 11, 2025, 8:36pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/3 "2025-06-11T20:36:27Z")

</div>

no errors in the console I change like how you suggest he don t work

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 11, 2025, 8:39pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/4 "2025-06-11T20:39:12Z")

</div>

Try this:  
`const camera=new THREE.OrthographicCamera (sizes.width/-2,sizes.width/2,sizes.height/2,sizes.height/-2,0,1000000);`

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 11, 2025, 8:45pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/5 "2025-06-11T20:45:25Z")

</div>

Hi Chaser\_Code long time

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 11, 2025, 8:58pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/6 "2025-06-11T20:58:05Z")

</div>

nothing change

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [June 11, 2025, 9:13pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/7 "2025-06-11T21:13:08Z")

</div>

Which element are you appending the renderer dom element to? It may be a case of updating the css for either that or the canvas to be 100% screen size, as well as setting the renderer size

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 11, 2025, 9:24pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/8 "2025-06-11T21:24:11Z")

</div>

my html file

 ![uu](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/c/ec5ee87eaa76354c7464b04370dee72782e78080.jpeg)

my main.js

```import

console.log(THREE)

const canvas=document.querySelector('.webgl')

const scene=new THREE.Scene();

const geometry=new THREE.BoxGeometry(1,3,1);

const material=new THREE.MeshBasicMaterial({color:"blue"});

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

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

 
const aspectRatio=sizes.width/sizes.height
console.log(aspectRatio)
//const camera=new THREE.PerspectiveCamera(75,sizes.width / sizes.height);
const camera=new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,2,-2, 0, 100000)

camera.position.z=-2

scene.add(camera);
console.log(camera.position.length())

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

const cx=()=>{

const elapsedTime=clock.getElapsedTime()
mesh.rotation.y = elapsedTime
console.log(elapsedTime)

renderer.render(scene,camera)
 window.requestAnimationFrame(cx)
}
//cx()

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

```

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [June 11, 2025, 10:39pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/9 "2025-06-11T22:39:28Z")

</div>

3 things i found in the code you shared.

1. You don’t declare `THREE`. Try adding `import * as THREE from 'three'`

2. You don’t declare clock.  
Try adding this `const clock = new THREE.Clock()`

3. You dont start your animation loop.  
Look at your line `//cx()`. Try removing the `//` so its not commented out.

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [June 12, 2025, 6:25am UTC](https://discourse.threejs.org/t/orthographiccamera/83904/10 "2025-06-12T06:25:43Z")

</div>

…or if you don’t want render loop…

```javascript
const canvas=document.querySelector('.webgl')
const sizes={
    width:800,
    height:600
}
const scene=new THREE.Scene();

const renderer=new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(sizes.width, sizes.height)
const geometry=new THREE.BoxGeometry(1,3,1);
const material=new THREE.MeshBasicMaterial({color:"blue"});
const mesh=new THREE.Mesh(geometry,material)
scene.add(mesh)
const aspectRatio=sizes.width/sizes.height
//const camera=new THREE.PerspectiveCamera(75,sizes.width / sizes.height);
const camera=new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,2,-2, 0, 100000)
camera.position.z= 2
scene.add(camera);
renderer.render(scene,camera)

```

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 12, 2025, 12:31pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/11 "2025-06-12T12:31:23Z")

</div>

I declare those things I just didn t paste it here

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [June 12, 2025, 12:58pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/12 "2025-06-12T12:58:29Z")

</div>

Are you still _fighting_ with that…?

Declare `clock` like @seanwasere mentioned and set `z` of `camera` to **2**.  
Then your code will be working…

[https://codepen.io/Lucas\_Mas/pen/LEVmyqv](https://codepen.io/Lucas_Mas/pen/LEVmyqv)

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 12, 2025, 1:46pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/13 "2025-06-12T13:46:41Z")

</div>

thanks guy

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 12, 2025, 1:47pm UTC](https://discourse.threejs.org/t/orthographiccamera/83904/14 "2025-06-12T13:47:03Z")

</div>

thanks to everyone