CODEWITHSUNDEEP
three.js
Wawasi
Wawasi

Reputation: 16

Three js crossfade three backgrounds continously

I'm currently working on my first three js project, and getting quite an education. But, I've hit a wall, and am seeking a generalized outline of what to do.

I have three images that I want to use as background images. I want them to crossfade at a specified interval... let's say every 5 seconds, the background crossfades to the next one. After the last background is displayed, crossfade into the first one, and so forth in a loop.

I've found a few examples where there's crossfading between two objects, like this fiddle, but that seems to depend on having two cameras. I've taken other examples I've found as far as I could, nothing worthy of posting.

I don't understand enough about three, which is why I'm seeking help. If someone could help me define my approach, that would be fantastic. Should I be altering the opacity of my meshes? Doing something with shaders? Something else?

Here, at least, is how I'm adding one background:

camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 450;

scene = new THREE.Scene();

// Load the background texture
var summerTexture = THREE.ImageUtils.loadTexture( 'tree-animation/images/summer.png' );
summerMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
       map: summerTexture,
}));

summerMesh.material.depthTest = false;
summerMesh.material.depthWrite = false;

backgroundCamera = new THREE.Camera();

summerScene = new THREE.Scene();
summerScene.add(backgroundCamera);
summerScene.add(summerMesh);

Any direction would be most appreciated!

Upvotes: 0

Views: 1120

Answers (1)

Careen
Careen

Reputation: 567

This can be achieved by writing a custom shader and using the mix() or smooth-step() function between the images and add a clock to your render loop to update the shader uniforms to manipulate the transition in your shader over time.

Here is an example of a static blend of textures but can easily intergrated into your own project:

http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html

check the frag shader

Upvotes: 0

Related Questions