From 9728c7eb3567c0f2b738903b4ddf052db1e88bad Mon Sep 17 00:00:00 2001 From: leca Date: Thu, 30 Nov 2023 19:31:13 +0300 Subject: [PATCH] separated sprial logic --- view/graphics.js | 34 ++++++---------------------------- view/spiral.js | 30 ++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 28 deletions(-) create mode 100644 view/spiral.js diff --git a/view/graphics.js b/view/graphics.js index 73bac97..f67eff4 100644 --- a/view/graphics.js +++ b/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 diff --git a/view/spiral.js b/view/spiral.js new file mode 100644 index 0000000..397ddf0 --- /dev/null +++ b/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; + } +} \ No newline at end of file