Skip to content

Instantly share code, notes, and snippets.

@mitallast
Created August 26, 2019 05:56
Show Gist options
  • Save mitallast/3acc8558de7b653bb0ac40bc50ce5529 to your computer and use it in GitHub Desktop.
Save mitallast/3acc8558de7b653bb0ac40bc50ce5529 to your computer and use it in GitHub Desktop.
"use strict";
const THREE = window.THREE;
const width = window.innerWidth;
const height = window.innerHeight;
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const gridWidth = 50;
const gridLength = 400;
const rectSize = 1;
const pointLight = new THREE.PointLight(0xFFFFFF, 1, gridLength);
pointLight.position.set(gridWidth / 2 * rectSize, 0, 1);
scene.add(pointLight);
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5); // soft white light
scene.add(ambientLight);
const camera = new THREE.PerspectiveCamera(20, width / height, 1, 1000);
camera.position.set(gridWidth / 2 * rectSize, 0, 5);
camera.lookAt(gridWidth / 2 * rectSize, gridLength, 0);
const clock = new THREE.Clock();
let time = 0;
noise.seed(Math.random());
const grid = [];
function randomGrid() {
for (let y = 0; y <= gridLength; y++) {
grid[y] = randomGridRow(y);
}
}
let yCounter = 0;
let scale = 10;
const roadWidth = 3;
function randomGridRow() {
yCounter++;
const row = [];
for (let x = 0; x <= gridWidth; x++) {
const n = Math.max(0, noise.simplex2(x / scale, yCounter / scale));
const r = Math.log(0.0001 + Math.abs(x - gridWidth / 2) / roadWidth);
row[x] = Math.max(0, Math.pow(n, 2.4) * 5 * r);
}
return row;
}
randomGrid();
const geometry = new THREE.BufferGeometry();
const rectLen = 3 * 6;
const gridVertices = gridWidth * gridLength * rectLen;
const vertices = new Float32Array(gridVertices);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
function updateVertices() {
for (let t = 1; t < time; t++) {
grid.shift();
grid.push(randomGridRow());
}
time = time % 1;
const shift = -time;
for (let y = 0; y < gridLength; y++) {
const offsetY = y * gridWidth * rectLen;
for (let x = 0; x < gridWidth; x++) {
const offsetX = x * rectLen;
const offset = offsetX + offsetY;
vertices[offset] = (x) * rectSize;
vertices[offset + 1] = (y + shift) * rectSize;
vertices[offset + 2] = (grid[y][x]) * rectSize;
vertices[offset + 3] = (x + 1) * rectSize;
vertices[offset + 4] = (y + shift) * rectSize;
vertices[offset + 5] = (grid[y][x + 1]) * rectSize;
vertices[offset + 6] = (x + 1) * rectSize;
vertices[offset + 7] = (y + shift + 1) * rectSize;
vertices[offset + 8] = (grid[y + 1][x + 1]) * rectSize;
vertices[offset + 9] = (x + 1) * rectSize;
vertices[offset + 10] = (y + shift + 1) * rectSize;
vertices[offset + 11] = (grid[y + 1][x + 1]) * rectSize;
vertices[offset + 12] = (x) * rectSize;
vertices[offset + 13] = (y + shift + 1) * rectSize;
vertices[offset + 14] = (grid[y + 1][x]) * rectSize;
vertices[offset + 15] = (x) * rectSize;
vertices[offset + 16] = (y + shift) * rectSize;
vertices[offset + 17] = (grid[y][x]) * rectSize;
}
}
geometry.computeFaceNormals();
geometry.computeVertexNormals();
}
const meshMaterial = new THREE.MeshStandardMaterial({color: 0xa000f0});
const mesh = new THREE.Mesh(geometry, meshMaterial);
scene.add(mesh);
function render() {
requestAnimationFrame(render);
// randomGrid();
updateVertices();
geometry.attributes.position.needsUpdate = true;
time += clock.getDelta() * 100;
renderer.render(scene, camera);
}
window.onload = function () {
render();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment