OrthographicCamera

Questions
1

Hi everyone

I write this
code

I have nothing on the page

rendu
rendu1141Ă—766 53.6 KB

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
12650Ă—147 30.5 KB

can I have some explication ?

thanks

2

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

No errors in the console?

3

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

4

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

5

Hi Chaser_Code long time

6

nothing change

7

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

8

my html file

uu
uu846Ă—251 56.3 KB

my main.js


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

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.

2 Likes
10

…or if you don’t want render loop…

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

I declare those things I just didn t paste it here

12

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

13

thanks guy

14

thanks to everyone