How to recreate this spiral effect with line geometry?

Questions
1

I want the spiral effect just like https://jsfiddle.net/prisoner849/4gnm8bw3/
but at the place of box geometry, I want some line geometry(crescent shape likely similar to moon shape) .
I tried this but fail to get exactly what I want.

image
image718×591 53.2 KB 

         var smileyMouthPath = new THREE.Path()
        .moveTo(20, 20)
        .quadraticCurveTo(500, 600, 1000, 100)
        .quadraticCurveTo(500, 400, 120, 100);
 var radius = 10;

 var turns = 3;

var objPerTurn = 30;

var angleStep = (Math.PI * 2) / objPerTurn;

var heightStep = 0.5;

var points = smileyMouthPath.getPoints();

var geom = new THREE.BufferGeometry().setFromPoints(points);;

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);}
2

I’ve update the fiddle with a small modification so the code uses now ShapeBufferGeometry. The idea is doing something like:

var shape = new THREE.Shape()
.moveTo( 0, 2 )
.quadraticCurveTo( 2, 4, 4, 2 )
.quadraticCurveTo( 2, 5, 0, 2 );

var geometry = new THREE.ShapeBufferGeometry(shape);

You can then use this geometry instead of a box in order to create your objects. You still have to individually transform and style the objects. But I guess the fiddle is a good starting point.

https://jsfiddle.net/vrqz9hgb/

2 Likes
3

And the trick with rotation:

  // position
  plane.position.set(
    Math.cos(angleStep * i) * radius,
    heightStep * i,
    Math.sin(angleStep * i) * radius
  );
  // rotation
  plane.rotation.y = - angleStep * i;

Having this, you can also apply scale to your objects, increasing it by value of i.

2 Likes