JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<div id="animate-lines"></div>

CSS

body {
    overflow: hidden;
    margin: 0;
}

JavaScript

var planeVertShader = `
#define PI 3.1415926
uniform float time;
uniform float amplitude;
uniform float waveLength;
uniform vec3 pos;
uniform float timeSpeed;
uniform float planeHeight;
uniform float initRotation;
uniform float speedRotation;
varying vec3 varPos;
void main() {

  vec3 p = position + pos + vec3(0., .1, 0.);
  float wLength = 1. / waveLength;
  float heightNormal = position.y / planeHeight;
  float oneRound = heightNormal * PI * 4.;
  //вращение
  p.y += sin(p.x * wLength + time) * cos(p.z * wLength  + time) * amplitude;
  p.x = cos(-time * speedRotation + oneRound + initRotation) * position.x;
  p.z = sin(-time * speedRotation + oneRound + initRotation) * position.x;

  //скручивание
  p.x += cos(-time * speedRotation + oneRound) * heightNormal * 5.;
  p.z += sin(-time * speedRotation + oneRound) * heightNormal * 5.;

  p += pos + vec3(0., .1, 0.);

  varPos = position;

  vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
  gl_Position = projectionMatrix * mvPosition;
}
`;
var planeFragShader = `
void main() {
  gl_FragColor = vec4(0.366,0.048,0.515,1.000);
}
`;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 25, 160);
camera.rotation.set(0, 0, 1.28);
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setClearColor(0x000000);
renderer.setSize(window.innerWidth, window.innerHeight);
//document.body.appendChild(renderer.domElement);
document.getElementById('animate-lines').appendChild(renderer.domElement);
console.log();
window.addEventListener('resize', function () {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}, false);

// plane
var planes = [];
var planeHeight = 125;
var planeWidth = 15;
var planeGeom = new THREE.PlaneBufferGeometry(planeWidth, planeHeight, 15, 100);
planeGeom.translate(4, 0, 0);
for (var...