3D particles slideshow not working

Questions
, ,
1

Hello!

Two and a half months ago I posted a question in this forum but I still haven’t managed to solve it.

I am creating a 3D slideshow of a sequence of 2D images, although it seems I can not move to the next images.

This is the code (https://codepen.io/scarscarin/pen/zYrOojw). I am using an imgArray and a Math.tan to move the particles and create a hyperloop effect. I want the image to change after the hyperloop but, although the imageIndex value adds up, the img stays the same

var imageIndex = 0;

function createPixelData() {
  var image = document.createElement("img");
  var imgArray = new Array();

  imgArray[0] = new Image();
  imgArray[0].src = 'img01.jpg';

  imgArray[1] = new Image();
  imgArray[1].src = 'img02.jpg';

  imgArray[2] = new Image();
  imgArray[2].src = 'img03.jpg';

  image.src = imgArray[imageIndex].src;
}

function update() {

 shaderUniforms.amplitude.value = Math.tan(animationTime);

 animationTime += animationDelta;

 if (shaderUniforms.amplitude.value > Math.tan(animationTime)) {
   imageIndex++;
 }

Any tips?

Best,
Leo

2

I’m having some troubles to debug your code since the used three.js version is so old (^^sorry). But it looks like your are not updating the vertex color attribute with new data. Meaning just increasing the image index is not enough. You have to use this index to pick the correct image data and then updating the vertex colors.

1 Like
3

Thanks!

Do you know what would be an updated version of the three.js I’m using?

4

You are using r62 which is from 2013. I suggest you rewrite your code with r119 (the current release).

1 Like
5

I updated the script link for three.min.js and TrackballControls.js with the new ones from github but now the code doesn’t run anymore. Lots of errors, especially on the TrackballControls.js. Is there a different way to import these js files or should I keep these versions?

6

Unfortunately, just linking to new file version is not enough. The code has to be refactored so it actually uses the latest API.