Hi, im new to threejs and i want to do this thing and animate it. Problem Is i dont even know where to start.
Yes but nothing helped as much as it would need
Where did you get those reference pics from?
I would start with distortion of a plane, applying noise.
Okay, thank you i will come for help with code
I looked through the code on perlin but i have just plane with perlin
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.
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);
Animating in shaders, with noise, makes it more funny
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
Thank you for your help really appreciate it.