vaporwave/Assets/Components/CylinderDistortionComponent.re.ts

import * as RE from 'rogue-engine'
import * as THREE from 'three'

export default class CylinderDistortionComponent extends RE.Component {
  awake() {
    this.distort()
  }

  start() {
  }

  update() {

  }

  distort() {
    const positions = (this.object3d as any).geometry.getAttribute("position")
    const normals = (this.object3d as any).geometry.getAttribute("normal")
    const uv = (this.object3d as any).geometry.getAttribute("uv")
    const pos = new THREE.Vector3(0,0,0)
    const norm = new THREE.Vector3(0,0,0)
    const uvPoint = new THREE.Vector2(0,0)

    const alteredPosition = new THREE.Vector3(0,0,0)

    for (let i = 0; i < (positions.array.length / positions.itemSize); i++) {
      const offset = i * positions.itemSize

      pos.set(positions.array[offset], positions.array[offset + 1], positions.array[offset + 2])
      norm.set(normals.array[offset], normals.array[offset + 1], normals.array[offset + 2])

      const uvOffset = i * uv.itemSize
      uvPoint.set(uv.array[uvOffset], uv.array[uvOffset + 1])


      alteredPosition.set(pos.x, pos.y, pos.z)
      const modifier = 1-Math.cos(pos.y / 12)
      alteredPosition.add(norm.multiplyScalar((12 * modifier) * Math.random()))

      positions.array[offset] = alteredPosition.x
      positions.array[offset + 1] = alteredPosition.y
      positions.array[offset + 2] = alteredPosition.z
    }
  }
}

RE.registerComponent(CylinderDistortionComponent);