Three.js - how to make objects with different positions look at Orthographic camera using vectors?

Question

Three.js 76

I start to use Orthographic camera instead Perspective - has some troubles.

I use stemkoski's shader-glow for point animation in scene: he created some sphere and then use shader for it transparancy, i just add animation to it.

function animatePoints() {        
    var alphas;
    var count;
    var time;

    let j = 0;

    while ( animatedPoints[j] ) {

        let threeGlow = animatedPoints[j];

        let finishAnimation = threeGlow.meta.state.finishAnimation;
        let itFinished = 0;
        let pointGlowMat = threeGlow.material;
        let pointGlowGeom = threeGlow.geometry;

        // ########## make glow look at camera
        pointGlowMat.uniforms.viewVector.value = new THREE.Vector3().subVectors( threeGlow.position, camera.position);

        alphas = pointGlowGeom.attributes.alpha;
        count = alphas.count;
        time = 0.001* Date.now();

        if ( finishAnimation ) {
            ....
        } else {
            ....
        }

        alphas.needsUpdate = true;
        j++;
    }

}

Main goal - to make glow look at camera. When camera was perspective i use solution with subtracts two vectors - camera position and glow position, so it look like glow looking at camera.

pointGlowMat.uniforms.viewVector.value = new THREE.Vector3().subVectors( camera.position, threeGlow.position );

But now, when i use Orthographic camera this solution doesn't work correctly. The problem is that now the glow should look not at camera position point, it should look at plane of the camera.

I make some pic scheme for that situation: look it, it very useful

So for each new glow (it's positions of course different) i must get new red vector, to make each glow look at orto cam.

Any ideas?

Answer 1

What you need to do to get the red vector in your image, is project vector sub on the vector representing the direction in which the camera is looking.

I think this is what you need:

pointGlowMat.uniforms.viewVector.value = new THREE.Vector3()
    .subVectors( camera.position, threeGlow.position )
    .projectOnVector( camera.getWorldDirection() );

Answer 2

One way to make an object "look at" an orthographic camera by using this pattern:

object.quaternion.copy( camera.quaternion );

The object's view direction will be perpendicular to the camera's projection plane.

This approach is appropriate if neither the object nor the camera have a rotated parent.

three.js r.84