# 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.

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?

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;

}
``````
4 Likes

omg, thank you!

You’re welcome
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)

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