CODEWITHSUNDEEP
javascriptthree.jscamera
redfelix
redfelix

Reputation: 149

Three.js- How can I limit the cameras view in a 3D scene?

I added first person controls to a three.js scene. I want to limit the camera views so that the ends of the scene aren't shown. I'm using the firstpersoncontrols.js from the three.js library, which includes mouse, W,A,S,D and arrow controls. How can limit the camera views with the controls? I already tried to limit the control distance. Here is what I have so far regarding the camera and controls:

camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
            camera.position.set( 30, 30, 100 );
            //
            controls = new THREE.FirstPersonControls( camera );
                        controls.movementSpeed = 100;
                        controls.enabled=true;
                        controls.maxDistance=50;//no change
                        controls.minDistance=10
                        controls.enablezoom=false;

https://codepen.io/anon/pen/baNJGR

Upvotes: 1

Views: 1031

Answers (1)

HariV
HariV

Reputation: 707

If you wish to adjust how far and wide your camera should see, then you can adjust the FOV, near and far parameters ( PerspectiveCamera( fov, aspect, near, far ) ).

For example, try creating camera with these values(try it on the codepen example ),

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 200 );

You can change the FOV to decide width of the camera simulated view and change far parameter to adjust how far the camera should see.

Upvotes: 1

Related Questions