Created
August 26, 2019 05:56
-
-
Save mitallast/3acc8558de7b653bb0ac40bc50ce5529 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"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