JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
CSS
html,body, #dang {
margin:0;
overflow:hidden;
}
JavaScript
var width = window.innerWidth,
height = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(0, 50, 500);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
var grid = new THREE.PlaneGeometry(1000, 500, 50, 25);
grid.vertices.forEach(function(v) {
v.z = Math.random() * 10;
v.vz = Math.random() / 10;
v.maxz = Math.random() * 10;
v.minz = Math.random() * -10;
});
var material = new THREE.MeshBasicMaterial({
color: 0xFF0099,
vertexColors: THREE.FaceColors,
wireframe: true,
});
var plane = new THREE.Mesh(grid, material);
plane.rotation.x = Math.PI * 0.55;
plane.position.y = -20;
scene.add(plane);
var alimony = grid.vertices;
for (var i = 0; i< alimony.length; i++){
alimony[i].color.setRGB(Math.random(), Math.random(), Math.random());
}
document.body.appendChild(renderer.domElement);
function render() {
var verts = grid.vertices;
var i = verts.length;
while (i--) {
var vert = verts[i];
vert.z += vert.vz;
if (vert.z < vert.minz || vert.z > vert.maxz) vert.vz *= -1;
}
grid.groupsNeedUpdate = true;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();