Floating object with postprocessing

Hi community , i am new with you , I try to float object from bottom like in this website
but there is many points :slightly_frowning_face:
1- i try to make a far object with little blur
2- the object flying from the bottom
why there is a limit with y axis ?
and how i can stop moving in x axis ?
i try with an example in threejs website

What you’re after is “depth of field” effect, or “dof”, often called “bokeh” as well. I’m sure you’ll be able to find what you’re looking for with that information.

1 Like


To make the objects in the scene moving in a loop on y-axis.

Remove or comment out that part in the animation loop:

    camera.position.x = Math.cos(time) * 400;
    camera.position.z = Math.sin(time) * 500;
    camera.position.y = Math.sin(time / 1.4) * 100;

If I got you correctly.

Yes thank you i use it, but i have some problem with it so i explain it in the post

Yes thank you, that’s work a bit , but why it disappear progressively?
and how i can float it from the bottom , thank’s

Why it shouldn’t, if you have these lines in the animation loop:

plane.position.x += plane.position.dx;
plane.position.z += plane.position.dz;

Change this plane.position.y += 2;
and that condition from
if (plane.position.y < 0) plane.position.y += 300;
if (plane.position.y > 300) plane.position.y = 0;

PS Put more effort, investigating what and how works in the code.

1 Like

Yes you are right , but i think i worked with wrong way, like i start with huge example and all i need is a sphere float from bottom and the far one is blurry, i will try thank you

Hi, i try to make this from zero, but when i add

        if (plane.position.y >300) plane.position.y =0;

there appear from where its generate , and i don’t want that , so i try to minimize thy y position

        if (plane.position.y >300) plane.position.y =-503;

but in this way they became like a waves from spheres , how i can make it continuous

Distribute objects in range from -503 to 300 (thus 803 in sum).

Try to change this:
plane.position.set(rand() * 150, 0 + rand() * 300, rand() * 150);
to this:
plane.position.set(rand() * 150, -503 + rand() * 803, rand() * 150);