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.

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 = …

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 …

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.Mesh…

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: …

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…

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

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){ …

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

How to recreate this spiral effect?

Questions

prisoner849 August 16, 2019, 10:02am 10

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

Topic		Replies	Views
Helix likes animation Questions animation	19	2001	August 30, 2021
Threejs Helix rotation Questions transform	4	2732	February 5, 2020
Spiral effect with divs Questions transform	3	1940	January 30, 2021
[SOLVED] Creating a helical sweep with a flat profile Questions geometry	19	4152	May 15, 2024
Create 3D Spiral Carousel Questions geometry	1	617	April 8, 2025

How to recreate this spiral effect?

Related topics