Develop Reference

three.js DirectionalLight and shadow cut off

As per the screenshot, shadows cast onto the THREE.PlaneGeometry(250, 380, 1, 1) below are cut off.
Steps I've taken to enable shadows
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
..
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
..
mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
mainLight.position.set(50, 50, 50);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
mainLight.shadow.camera.near = 1;
mainLight.shadow.camera.far = 1000;
mainLight.shadow.camera.fov = 100;
scene.add(mainLight);
..
plane.receiveShadow = true;
..
model.castShadow = true;
model.receiveShadow = true;
I've played with different values like the shadow camera FOV and far plane values...
Is this a caveat with using DirectionalLight? I need even lighting across all of my models, as opposed to SpotLight.
I found three.js shadow cutoff but it simply suggested using a SpotLight instead and gave no explanation as to why that changes anything.
When I do use a SpotLight, I suddenly lose shadows on ground plane altogether.
--
Thanks

See the three.js documentation for DirectionalLightShadow:
This is used internally by DirectionalLights for calculating shadows.
Unlike the other shadow classes, this uses an OrthographicCamera to calculate the shadows, rather than a PerspectiveCamera. This is because light rays from a DirectionalLights are parallel.
See further DirectionalLight
A common point of confusion for directional lights is that setting the rotation has no effect. This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target Direct Light' in other applications.
This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component).
The reason for this is to allow the light to cast shadows - the shadow camera needs a position to calculate shadows from.
This means that the area affected by the shadow is defined by the position and the camera of the light source (DirectionalLight).
Set up the camera for the mainLight and define its orthographic projection for your needs:
mainLight.shadow.camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 0.5, 1000 );

ThreeJS camera facing point

In ThreeJS, if the camera is rotated at any given angle, how can I determine the coordinate of the point exactly 1 unit in the direction that the camera is facing.
If you are unfamiliar with ThreeJS camera rotation angles, the rotations are very very weird.
For example, if all of my rotation variable are 0, then the function would return (0, 0, -1).
If the rotation x is Pi / 2 (90 degrees), then the function would return (1, 0, 0)
How could I create a function to do this? I don't need everything, primarily just the math.

You want to get the world position of a point that is one unit in front of the camera.
One way to do that is to add an object in front of, and as a child of, the camera. Then you just need to query the world position of the object.
By default, when a camera's rotation is ( 0, 0, 0 ), the camera is looking down its negative z-axis. So here is the pattern to follow:
var object = new THREE.Object3D();
object.position.set( 0, 0, - 1 );
scene.add( camera ); // this is required when the camera has children
camera.add( object );
Now, you can get the point you need like so:
var worldPos = new THREE.Vector3(); // create once and reuse it
...
camera.updateMatrixWorld(); // this is called in the render loop, so you may not have to call it again. Experiment.
worldPos.setFromMatrixPosition( object.matrixWorld );
three.js r.71

how to set the first lookAt/target of a Control

I need to set the initial 'lookAt' point of the scene, that will be the center of the screen and of the control's rotation.
If possible, I would prefer to set a point (or an object's position), not rotation angles.
The control is OrbitControl. If I simply set lookAt before the Control initialization, the center is restored to (0,0,0) on the first user interaction, which causes a 'gap' ...
// camera
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 20000);
camera.position.set(0,20,20);
camera.lookAt(new THREE.Vector3(0,10,0));
// controls
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
How can I set the initial point in a proper way?

Try setting the control's target and remove the camera.lookAt call:
controls.target = new THREE.Vector3(0, 10, 0);
controls.update();

Or more directly (without instanciating a new THREE.Vector3 but updating the values):
controls.target.set(0, 10, 0);
NB: controls.update() advice still remains for the 1st frame

Three.js Child of camera isn't visible

I'm trying to attach an object to the camera so that it can be used more more or less as a GUI element.
My camera is defined as follows:
camera = new THREE.PerspectiveCamera( 45, windowWidth / windowHeight, 1, 2000 );
camera.position.z = 100;
In my init(), I define the object to be added:
obj = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5, 1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0xFFFFFF } ));
obj.position.set( 0, 0, -50);
camera.add(obj);
But, the block does not show up. I have tried adding this object to scene, and it is visible. I added a loop to animate() that will slide the object's z position between (-50, 50), but I can't see it.
I tried using camera.lookAt(obj) and logging the world position of obj (obj position + camera position), and they behave as expected. World position seems to be what I'd expect, and camera.lookAt flips the camera when the z position crosses 0.
I apologize for not providing more clear example code, but I will do my best to cooperate with anyone trying to help me. Thanks!

Did you add the camera to the scene?
scene.add( camera );
The camera does not usually have to be added to the scene, but in this case, the object is a child of the camera, so you must.
three.js r.58

How to get Orientation of Camera in THREE.js

I am creating a 3d game using THREE.JS and the Web Audio API. One of the problems I am having is that I want to use the web audio Listener orientation, and define the listener to be the camera, whose position and direction are constantly being updated
My question, is there anyway to easily get the vector direction of a THREE camera?
I was trying to calculate it by using the old camera position, and using the velocity vectors to calculate which way it is facing, but this won't work when the camera is standing still...
Would it be feasible to create a unit vector by getting using camera.rotation.x, camera.rotation.y, camera.rotation.z ?
or is there an even easier way?
Thanks so much for your time!

You want to know the direction in world space in which the camera is looking.
In camera space, the camera is located at the origin and is looking down it's negative z-axis.
Pick a point in front of the camera in camera space:
var pLocal = new THREE.Vector3( 0, 0, -1 );
Now transform that point into world space:
var pWorld = pLocal.applyMatrix4( camera.matrixWorld );
You can now construct the desired direction vector:
var dir = pWorld.sub( camera.position ).normalize();
EDIT: Updated for three.js r.57
EDIT: Also see: three.js set and read camera look vector

In revision 69 (not sure in what revision it was introduced), you can call
camera.getWorldDirection()
to get the camera orientation vector.

if your camera is a child of the player object .e.g. in FPS game. Do the same calculation on the player (parent of camera) , and use this (the Bullit gets the right direction, in this case from obj)
Bullit.prototype.getDirection=function(obj){
this.position.add(obj.position);
var pLocal = new THREE.Vector3( 0, 0, -1 );
var pWorld = pLocal.applyMatrix4( obj.matrixWorld );
var dir = pWorld.sub( obj.position ).normalize();
this.direction=dir;
}