How to recreate this spiral effect?

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.

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.

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.

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);
}
4 Likes

omg, thank you!

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.

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:

What am i doing wrong here?

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

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

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

1 Like

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

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

1 Like

u r magician man! thank you!

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

3 Likes