Transition effect

Questions
1

hello all,
how i can do an affect transition like This one

2

What have you tried so far?

3

i have already try the smooth camera movement with tween for the zoom and also i fellow this example
https://threejs.org/examples/webgl_postprocessing_crossfade.html
it work with (BoxGeometry,SphereGeometry,…) but not with gltf file
i think is done with render to texture between thwo scene to get 2 texture and do some effect but i can’t achives to do it :frowning:

4

You could try starting here:

This shows how to transition between images. Then you could render each scene to a texture and transition between them that way. I don’t know if that’s how the Adidas site does it though.

Look through the rest of three.js Archives | Codrops too, there might something else useful.

You can also use this browser extension to help investigate existing sites:

5

thank you for your reply
but if you have a good example how get render to texture from current scene for i put it like image texture on plan measured with window height and Width

6

or maybe using layer and effectcomposer can do the effect on desired object and after that i switch scene (sceneA = sceneB)

7

how get render to texture from current scene

There are loads of examples in the repo, e.g.

It works like this, basically:

// 1. Create a render target (see the docs for options)
const renderTarget = new WebGLRenderTarget(256, 256, options);

// 2. pass the target to the renderer
renderer.setRenderTarget(renderTarget);

// 3. render as normal
renderer.render(scene, camera);

// 4. Now you can access the rendered scene as renderTarget.texture
// for example use it as a map for a plane
const plane = new Mesh( planeGeo, new MeshBasicMaterial( { map: renderTarget.texture } ) );

Now whenever you call renderer.render the texture will be updated. If you want to switch to a different render target, call renderer.setRenderTarget(otherRenderTarget).

Note that I’m ignoring some stuff here like encoding for simplicity, explore the examples to see how it’s done. Search through the .html files in the examples/ folder for setRenderTarget and you’ll find all the examples that render to texture.

1 Like
8

i tried like that but it gave me white screen
this is the code i use

9

also this warning

256[.WebGL-00004E38002BCD00] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.

10

Well aside from anything else you don’t have any Html or CSS so there’s no way this can work. Besides that, this code is over complicated and has way too many errors for me to deal with.

I recommend you to start by creating a very simple scene that contains the plane or cube you will put the rendered texture onto. Make sure the basic scene with no render target works first. Maybe start with this scene:

Then try to replace the wood texture with your renderTarget.texture