Current version of THREE.js supports for limiting zoom(in and out) in Trackball controls.
var controls = new THREE.TrackballControls(camera,renderer.domElement);
controls.minDistance = 20;
controls.maxDistance = 80;
But I don't find any property in orthographicTrackballControls for limiting zoom. Is there a solution?
Related
I'm using the OrbitControls script on my site. By default it is zoomed a little too far in.
I was wondering what the best way to manually set, or set the default camera zoom is?
Set the camera position to a comfortable distance before creating the OrbitControls:
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
camera.position.z = -10
// Now initialize camera controls
const controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.rotateSpeed = 2.0
controls.zoomSpeed = 5
controls.panSpeed = 2
controls.enableZoom = true
// ...
I'm using three v0.85.2.
By default, all my objects are configured to cast and receive shadows :
const mesh = new Mesh(geometry, material)
mesh.castShadow = meshConfig.castShadow
mesh.receiveShadow = meshConfig.receiveShadow
shadowMap of the renderer is enabled.
Self shadows seem to be correctly rendered (green squares in the image below).
But shadows casted to other objects are missing (red squares).
The problem seems to occur with all my meshes.
I don't find a way to make them appear.
DirectionalLightShadow, there you can read how to work with shadows when you use THREE.DirectionalLight() in your scene.
Also you can play around with .left, .top, .right and .bottom properties of the shadow camera of your light source.
var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(50, 500, 22);
light.target.position.set(300, 400, 200);
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 5000;
light.shadow.camera.left = -500;
light.shadow.camera.bottom = -500;
light.shadow.camera.right = 500;
light.shadow.camera.top = 500;
light.castShadow = true;
scene.add(light);
three.js r85
jsfiddle example
Three.js r76
I was building a JSFiddle example for a slightly different problem but now can't get the shadow CameraHelper in the correct place to continue setting up my demo.
The spotlight helper appears to be working correctly but the shadow camera helper just seems to be parked at (0, 0, 0) and looking down the z axis.
Can anyone see where I'm going wrong please? Thank you.
JS Fiddle of Shadow Camera Helper seemingly in the wrong place
Code:
spt.position.set(0, 1000, 1000);
spt.castShadow = true;
spt.angle = 0.3;
spt.exponent = 2.0;
spt.penumbra = 0.05;
spt.decay = 1;
spt.distance = 3000;
spt.shadow.mapSize.width = 512;
spt.shadow.mapSize.height = 512;
spt.shadow.camera.near = 10;
spt.shadow.camera.far = 6000;
spt.shadowCameraHelper = new THREE.CameraHelper(spt.shadow.camera);
lightHelper = new THREE.SpotLightHelper(spt);
scene.add(spt.shadowCameraHelper);
scene.add(lightHelper);
scene.add(spt);
You need to enable Shadows in the renderer to get the CameraHelper to work:
renderer.shadowMap.enabled = true;
https://jsfiddle.net/n57kjtcs/17/
I'm newbie at Three.js and OpenGL at all. So I can't understand lighting. I add SpotLight to my scene as follow:
var light = new THREE.SpotLight(0xffff00);
light.position.set( 1.5, 5.5, 0.9 );
light.shadowCameraVisible = true;
light.shadowDarkness = 1;
light.intensity = 2;
light.castShadow = true;
light.shadowCameraNear = 0.1;
light.shadowCameraFar = 50;
light.target = new THREE.Object3D();
light.target.position.set(5.5, 5.5, 0);
scene.add(light);
I turn on shadow map debug at WebGLRenderer and see following picture on my screen:
If I fly behind crates I see shadows only on 'red' zone of light source frustum. In 'yellow' zone there are no shadows and it looks very bad (look at next screenshot). '.castShadow' and '.receiveShadow' properties set to 'true'.
Help me understand what I'm doing wrong. Maybe I don't understand SpotLight source or shadow mechanism. I will be grateful for any advice. Thanks.
Is there a way to put limits on the OrbitControls.js? Imagine I'm creating something above the ground, I wouldn't like the camera to go below the ground, know what I mean?! The same things goes for zoom in and zoom out. Is there a way to set some variables to limit that because I don't want the camera getting to close or too far away?
OrbitControls source
Zoom in / zoom out
this.minDistance = 0;
this.maxDistance = Infinity;
Where to stop rotation :
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
Don't let to go below the ground
controls.maxPolarAngle = Math.PI/2;
Just in case someone needs a a more robust answer with ground altitude and camera target adjustment:
You find the angle relative to the controls target and the ground position of the camera (regardless of altitude) and assign the maxPolarAngle. Adjust for your up axis, mine was Y. Inside the controls change event:
var centerPosition = controls.target.clone();
centerPosition.y = 0;
var groundPosition = camera.position.clone();
groundPosition.y = 0;
var d = (centerPosition.distanceTo(groundPosition));
var origin = new THREE.Vector2(controls.target.y,0);
var remote = new THREE.Vector2(0,d); // replace 0 with raycasted ground altitude
var angleRadians = Math.atan2(remote.y - origin.y, remote.x - origin.x);
controls.maxPolarAngle = angleRadians;
If you want more control over Orbit:
const controls = new OrbitControls(camera, this.renderer.domElement);
controls.enableDamping = true; //damping
controls.dampingFactor = 0.25; //damping inertia
controls.enableZoom = true; //Zooming
controls.autoRotate = true; // enable rotation
controls.maxPolarAngle = Math.PI / 2; // Limit angle of visibility
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
};
controls.addEventListener("change", () => {
if (this.renderer) this.renderer.render(this.scene, camera);
});