CODEWITHSUNDEEP
javascriptwebglthree.js
three.jsaddict
three.jsaddict

Reputation: 305

How to change the type of camera in Three.js?

I provided a dropdown list for two cameras (Perspective and Orthographic) on the page. Right now my Three Scene is using perspective Camera. But based on the selection in dropdown list, my camera should be changed to "Orthographic" and turns to Perspective If I select Perspective in the dropdown list. How could I achieve this? Please help me.

For detail code, Here is Jsfiddle link: http://jsfiddle.net/sagh0900/7Anag/9/

camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 1000 );
camera.position.y = 0;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(0, 0, 0));  
scene = new THREE.Scene();
scene.add(camera);
mesh = new THREE.Mesh(new THREE.Geometry());
scene.add(mesh);

Thanks in advance

Upvotes: 3

Views: 6475

Answers (2)

ditkin
ditkin

Reputation: 7054

I had suggested using CombinedCamera. It no longer exists. You can use what @prisoner849 has suggested in this post Three JS, Combined camera Documentation and support

You can use a variable, which you will assign one camera or another to. – prisoner849

Upvotes: 5

yaku
yaku

Reputation: 3111

I don't think you can change the Camera type of a camera instance on the fly, as they are separate classes and need to be instantiated separately.

You can however create two camera instances, one Ortographic and one Perspective camera, and specify on your render() call which camera is active. You would need to update both camera's position etc on your UI event handlers, or alternatively, clone the position etc in the render function.

Looking at three.js source though, it looks like it wouldn't be too hard to hack together a custom camera class that supports orto/perspective mode switching... That would be kind of a hack though.

Upvotes: 4

Related Questions