How to recreate this spiral effect?

Questions
1

Can anyone tell me how to recreate this effect: https://faits-marquants.inra.fr/en/
The spiral blocks that structured like that and by clicking on one of them it shows more info about card.

With Regards, Adil.

2

Hi!
What’s the difficulty of placing blocks in that formation?

You know helix’s radius, you know now many blocks per turn you have.
Placing objects in the circle formation involves the using of sin and cos functions (for z and x respectively). Increasing Y-value you’ll get shifting positions of blocks at height. Thus you’ll get that helix formation.

3

I am new to this technology, so do i understand it right?

  1. I need a loop to create for example 50 elements
  2. Then i need to set each position of that element individually? Or what should i do?
    Something like this:
    var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    for(var i = 0; i < 50; i++){
    var mesh = new THREE.Mesh( geometry, material );
    /* and how can i set their position using sin or cos functions? */
    }

Can you please provide pseudo code please?

With Regards, Adil.

4

Something like that:
https://jsfiddle.net/prisoner849/4gnm8bw3/

var radius = 10;
var turns = 3;
var objPerTurn = 30;

var angleStep = (Math.PI * 2) / objPerTurn;
var heightStep = 0.5;

var geom = new THREE.BoxBufferGeometry(2, 3, 0.1);

for (let i = 0; i < turns * objPerTurn; i++) {
  let plane = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
    color: Math.random() * 0x888888 + 0x888888
  }));
  
  // position
  plane.position.set(
    Math.cos(angleStep * i) * radius,
    heightStep * i,
    Math.sin(angleStep * i) * radius
  );
  
  // rotation
  plane.rotation.y = - angleStep * i;
  
  scene.add(plane);
}
9 Likes
5

omg, thank you!

6

You’re welcome :beers:
In general, when you have a radius and amount of planes, you just need to set values of angel step and height step to get coordinates of plane’s position. That’s all.

7

I’ve tried to change:

plane.position.set(
    Math.sin(angleStep * i) * radius, // set sin here
    heightStep * i,
    Math.cos(angleStep * i) * radius // set cos here
);

Because i wanted to start not from left, but from right and the first bottom box should face screen. But it gets like this:

11111
11111865Ă—736 14.3 KB

What am i doing wrong here?

8

You mean a counter-clockwise helix?
Set values like that then, without swapping of functions:

  // position
  plane.position.set(
    Math.cos(angleStep * i) * radius,
    heightStep * i,
    Math.sin(-angleStep * i) * radius // negative angle
  );

  // rotation
  plane.rotation.y = angleStep * i; // positive angle
9

ur awesome, thank you! Where i can read about three.js? (except official documentaion)

10

For example, here: New book called Discover three.js coming soon - in the meantime check out the tutorials!

1 Like
11

How can i achieve that effect of rotating object when i move mouse either left or right?
I am trying like so:

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
var cameraAngle = 0;
function onDocumentMouseMove(e){
    var center = window.innerWidth / 2;

    if(e.x > center){
        camera.position.x = cameraAngle;
        cameraAngle += 0.01;
    }else{
        camera.position.x = cameraAngle;
        cameraAngle -= 0.01;
    }
}

But its not that effect i want to achieve

12

Take a look at this example: https://threejs.org/examples/#webgl_lines_colors

1 Like
13

u r magician man! thank you!

14

@Insane
Just FYI, we’ve got a book shelf: 📕 Three.js Bookshelf

3 Likes
15

Hi @prisoner849, I’m trying to do the same spiral effect and I want the first card (the bottom card) to start at a specific position - for example: (10,0,10). What should I do to archive this?
Thanks in advanced.

16

@truonggiangdao
You know the radius of a helix and that the first plate sets from the center of the helix along x-axis.
Having this, you can calculate positions of cards.

17

Thanks for the hint @prisoner849, now that I know the “radius of helix” I can research more on it. Math is really magical!

1 Like