Three.js - 如何使用矢量使具有不同位置的对象看正交相机？答案

【问题标题】：Three.js - how to make objects with different positions look at Orthographic camera using vectors?Three.js - 如何使用矢量使具有不同位置的对象看正交相机？
【发布时间】：2017-03-27 04:52:36
【问题描述】：

三.js 76

我开始使用正交相机而不是透视 - 有一些麻烦。

我使用 stemkoski 的 shader-glow 来实现场景中的点动画：他创建了一些球体，然后使用着色器来实现透明度，我只是给它添加动画。

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++;
    }

}

主要目标 - 使发光看相机。当相机是透视时，我使用减去两个向量的解决方案 - 相机位置和发光位置，所以它看起来像看着相机发光。

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

但是现在，当我使用正交相机时，此解决方案无法正常工作。问题是现在发光不应该看相机位置点，它应该看相机的平面。

我为这种情况做了一些图片计划：look it, it very useful

所以对于每一个新的发光（它的位置当然不同）我必须得到新的红色矢量，让每一个发光看 orto cam。

有什么想法吗？

【问题讨论】：

标签： vector camera three.js

【解决方案1】：

要获得图像中的红色矢量，您需要做的是在表示相机观察方向的矢量上投影矢量sub。

我认为这是你需要的：

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

【讨论】：

我们需要，没有考虑 .getWorldDirection()，但它确实是一部分

【解决方案2】：

使用此模式使对象“查看”正交相机的一种方法：

object.quaternion.copy( camera.quaternion );

对象的观察方向将垂直于相机的投影平面。

如果对象和相机都没有旋转的父对象，则此方法是合适的。

three.js r.84

【讨论】：