separated sprial logic

view/graphics.js

@@ -1,35 +1,10 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { SpiralSegment } from './spiral.js';
 
 const spiralHeight = 2;
 
 let spiralMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
- // calculating segment geometry
-let pointsOfCurve = [];
-const number = 100;
-for (let i = 0; i <= number; i ++) {
-    let p = i / number;
-
-    let x = Math.cos(p * 2 * Math.PI);
-    let y = p * spiralHeight;
-    let z = Math.sin(p * 2 * Math.PI);
-
-    pointsOfCurve.push(new THREE.Vector3(x, y, z));
-}
-
-let curve = new THREE.CatmullRomCurve3(pointsOfCurve);
-let curveGeometry = new THREE.TubeGeometry(curve, 400, 0.1, 400, false);
-
-class SpiralSegment {
-    constructor(number) {
-        this.number = number;
-        let color = (Math.floor(Math.random() * 16777215)).toString(16);
-        console.log(color +`Y: ${number * spiralHeight}`);
-        this.segment = new THREE.Mesh(curveGeometry, new THREE.MeshPhongMaterial({color: `#${color}`}));
-        this.segment.position.y += number * spiralHeight;
-        scene.add(this.segment);
-    }
-}
 
 const scene = new THREE.Scene();
 
@@ -54,8 +29,11 @@ scene.add(ambientLight);
 
 let segments = []
 
-for (let i = -10; i < 10; i ++) {
-    segments.push(new SpiralSegment(i));
+for (let i = 0; i < 40; i ++) {
+    let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
+    let material = new THREE.MeshPhongMaterial({color: color});
+    segments.push(new SpiralSegment(i - 20, spiralHeight, material).getSegment());
+    scene.add(segments[i]);
 }
 
 //main loop

view/spiral.js

@@ -0,0 +1,30 @@
+import * as THREE from 'three';
+
+export const calculateGeometry = (spiralHeight) => {
+    let pointsOfCurve = [];
+    const number = 100;
+    for (let i = 0; i <= number; i ++) {
+        let p = i / number;
+
+        let x = Math.cos(p * 2 * Math.PI);
+        let y = p * spiralHeight;
+        let z = Math.sin(p * 2 * Math.PI);
+
+        pointsOfCurve.push(new THREE.Vector3(x, y, z));
+    }
+
+    let curve = new THREE.CatmullRomCurve3(pointsOfCurve);
+    return new THREE.TubeGeometry(curve, 400, 0.1, 400, false);
+}
+
+export class SpiralSegment {
+    constructor(number, height, material) {
+        this.number = number;
+        this.segment = new THREE.Mesh(calculateGeometry(height), material);
+        this.segment.position.y += number * height;
+    }
+
+    getSegment() { 
+        return this.segment; 
+    }
+}