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
so
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
https://jsfiddle.net/3fzLd2oe/

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

Hi!

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;
to
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
so

        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);