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.

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?

- I need a loop to create for example 50 elements
- 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);
}
```

9 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)

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

u r magician man! thank you!

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.

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

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