在屏幕边缘产生的粒子

时间:2013-12-14 10:18:33

标签: three.js

我搜索的范围很广,所以如果有类似的问题请原谅我,但我找不到它。

要把我正在尝试做的事情放在上下文中:我想要创建一个无限生成的恒星场,它们会在屏幕外消失并重新出现在相机移动的屏幕边缘。我正在使用自上而下的视图,所以实现这一点必须非常简单,但唉,我没有线索。

我正在使用以下代码来判断一个星星是否已经离屏,然后将其替换为:

//update camera frustum
camera.projScreenMatrix.multiplyMatrices(
    camera.projectionMatrix,
    camera.matrixWorldInverse
    );

camera.frustum.setFromMatrix(camera.projScreenMatrix);

//loop through stars
var stars=scene.stars.geometry.vertices;

for(var i=0;i<stars.length;i++) {
    if(!camera.frustum.containsPoint(stars[i])) {
        stars[i]=new THREE.Vector3(

            // fill in the blank

            );
        scene.stars.geometry.verticesNeedUpdate=true;
        }
    }

由于我正在使用透视相机,我知道我需要以某种方式考虑camera.fov和其他透视元素,但正如你所知,我不是第三维的专家。

假设我有一个角度或标准化向量告诉我视图平移的方向,我将如何沿着屏幕边缘创建一个顶点而不管它的Z位置?

如果我不够清楚,我会很乐意澄清。感谢。

2 个答案:

答案 0 :(得分:4)

我知道这是一个老问题,但我在寻找答案时遇到了它,并找到了一个简单的三角函数依赖方法来获得相机截头的左边缘,并且我正在分享它,以防其他人可能发现它很有用:

// Get half of the cameras field of view angle in radians
var fov = camera.fov / 180 * Math.PI / 2;
// Get the adjacent to calculate the opposite
// This assumes you are looking at the scene
var adjacent = camera.position.distanceTo( scene.position );
// Use trig to get the leftmost point (tangent = o / a)
var left = Math.tan( fov ) * adjacent  * camera.aspect;

基本上,这会得到最左边的点,但是如果你没有乘以纵横比,你应该在你的相机平截头体周围得到一个点,所以你可以将一个点转移到远离相机焦点的任何方向。永远都不会出现在视锥体之外。

它的工作原理是假设作为相机的假想平面垂直于连接相机及其焦点的线,因此存在直角。如果您想要更远的物体,这应该可以工作(因此,如果您希望它们距离相机更远,您只需要增加焦点和相机之间的距离)。

答案 1 :(得分:0)

好吧,无数的头痛和后来的另一个问题,我想出了一个相当临时的答案。为了防止其他人遇到同样的问题,以下函数在场景中绘制一个相对于摄像机当前视图的点,并指定任何Z:

//only needs to be defined once
var projector=new THREE.Projector();

//input THREE.Vector3
function(vector) {
    var z=vector.z;
    vector.z=0;
    projector.unprojectVector(vector,camera);
    return camera.position.clone().add(
        vector
            .sub(camera.position)
            .normalize()
            .multiplyScalar(
                -(camera.position.z-z)/vector.z
                )
        );

在这种情况下,xy的范围从-1到1,从左下角到右上角。您可以使用position/window.Widthposition/window.Height获得额外的精确度(使用鼠标坐标或您拥有的内容)。