Helix likes animation

Hi, im new to threejs and i want to do this thing and animate it. Problem Is i dont even know where to start.
NGk4u
F39vh

Hi!
Don’t hesitate to use forum’s search :slight_smile:
https://discourse.threejs.org/search?q=helix

1 Like

Yes but nothing helped as much as it would need

Where did you get those reference pics from?

From this website i want to animate that

I would start with distortion of a plane, applying noise.

Okay, thank you i will come for help with code

1 Like

Displacing vertices by sin: three.js webgl - geometry - dynamic

It is far away from the goal but it is something
codepen

Something about vertices and noise: Perlin Particles - #4 by prisoner849

I looked through the code on perlin but i have just plane with perlin

Try to put points in helix formation.
.setFromCylindricalCoords will help: three.js docs

So here i should do the function : .setFromCylindricalCoords?

const vertices = geometry.attributes.position.array;

    for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
        vertices[ j + 1 ] = data[ i ] * 10;
    }

As you want points in formation of helix, so use

let g = new THREE.BufferGeometry().setFromPoints( _your_points_ );
let m = new THREE.PointsMaterial({size: 0.05, color: "aqua"});
let p = new THREE.Points(g, m);
scene.add(p);

_your_points_ is an array of THREE.Vector3(), where vertices are in helix formation.

1 Like

But where i get the _your_points array from

var points=[];
var stepXZ=0.2;
var radius=1;
var stepY=0.01;


for(var n=0;n<610;n++){
var r2=Math.sin(n/200)*radius;
points.push(Math.sin(n*stepXZ)*r2);
points.push(n*stepY);
points.push(Math.cos(n*stepXZ)*r2);
}


var geometry=new THREE.BufferGeometry();
geometry.setAttribute("position",new THREE.BufferAttribute(new Float32Array(points),3));
var material=new THREE.PointsMaterial({size:0.1,color:"aqua"});
var mesh=new THREE.Points(geometry,material);
scene.add(mesh);

image

Animating in shaders, with noise, makes it more funny :slight_smile:

NoisyHelix

2 Likes

Sometimes, trying to create something complex, forget how cool simple things can be.

A distorted helix of points: https://codepen.io/prisoner849/full/qBjBwPz

A distorted helix of trails (indexed + LineSegments): https://codepen.io/prisoner849/full/KKqwogK

The base of both examples is the same helix formation :slight_smile:

4 Likes

Sounds like https://sphere.cz should hire you!

Thank you for your help really appreciate it.