Infinite forward grid movement with the power of three.js

Question

Infinite forward grid movement with the power of three.js

I've been experimenting with creating a moving blue grid effect in three.js, where the grid appears to be continuously advancing forward as if approaching the sun. I haven't been able to find any examples on how to achieve this specific effect. Something similar to what is shown in this GIF:

One approach I tried involves using the following code:

   lines1.position.z = Math.cos( time ) * 0.75 + 1.25;

This snippet showcases the creation of the grid using THREE.Line:

for (var i = -size; i <= size; i+=steps)
{
    geometry.vertices.push(new THREE.Vector3(-size, - 0.10,i));
    geometry.vertices.push(new THREE.Vector3(size, -0.10,i));

    geometry.vertices.push(new THREE.Vector3(i, - 0.10,-size));
    geometry.vertices.push(new THREE.Vector3(i, - 0.10,size));
}

var lines1 = new THREE.Line(geometry, material, THREE.LineSegments)


scene.add(lines1);

javascript three.js

Answer 1

Answer №1

Great query!

To tackle this challenge, I devised a solution using THREE.GridHelper() in conjunction with THREE.ShaderMaterial():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 50);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var division = 20;
var limit = 100;
var grid = new THREE.GridHelper(limit * 2, division, "blue", "blue");

var moveable = [];
for (let i = 0; i <= division; i++) {
  moveable.push(1, 1, 0, 0); // only allow movement of horizontal lines (1 - point is movable)
}
grid.geometry.addAttribute('moveable', new THREE.BufferAttribute(new Uint8Array(moveable), 1));
grid.material = new THREE.ShaderMaterial({
  uniforms: {
    time: {
      value: 0
    },
    limits: {
      value: new THREE.Vector2(-limit, limit)
    },
    speed: {
      value: 5
    }
  },
  vertexShader: `
    uniform float time;
    uniform vec2 limits;
    uniform float speed;
    
    attribute float moveable;
    
    varying vec3 vColor;
  
    void main() {
      vColor = color;
      float limLen = limits.y - limits.x;
      vec3 pos = position;
      if (floor(moveable + 0.5) > 0.5){ // check if a point is moveable
        float dist = speed * time;
        float currPos = mod((pos.z + dist) - limits.x, limLen) + limits.x;
        pos.z = currPos;
      } 
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    }
  `,
  fragmentShader: `
    varying vec3 vColor;
  
    void main() {
      gl_FragColor = vec4(vColor, 1.);
    }
  `,
  vertexColors: THREE.VertexColors
});

scene.add(grid);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  grid.material.uniforms.time.value = time;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

Answer 2

Great query!

To tackle this challenge, I devised a solution using THREE.GridHelper() in conjunction with THREE.ShaderMaterial():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 50);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var division = 20;
var limit = 100;
var grid = new THREE.GridHelper(limit * 2, division, "blue", "blue");

var moveable = [];
for (let i = 0; i <= division; i++) {
  moveable.push(1, 1, 0, 0); // only allow movement of horizontal lines (1 - point is movable)
}
grid.geometry.addAttribute('moveable', new THREE.BufferAttribute(new Uint8Array(moveable), 1));
grid.material = new THREE.ShaderMaterial({
  uniforms: {
    time: {
      value: 0
    },
    limits: {
      value: new THREE.Vector2(-limit, limit)
    },
    speed: {
      value: 5
    }
  },
  vertexShader: `
    uniform float time;
    uniform vec2 limits;
    uniform float speed;
    
    attribute float moveable;
    
    varying vec3 vColor;
  
    void main() {
      vColor = color;
      float limLen = limits.y - limits.x;
      vec3 pos = position;
      if (floor(moveable + 0.5) > 0.5){ // check if a point is moveable
        float dist = speed * time;
        float currPos = mod((pos.z + dist) - limits.x, limLen) + limits.x;
        pos.z = currPos;
      } 
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    }
  `,
  fragmentShader: `
    varying vec3 vColor;
  
    void main() {
      gl_FragColor = vec4(vColor, 1.);
    }
  `,
  vertexColors: THREE.VertexColors
});

scene.add(grid);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  grid.material.uniforms.time.value = time;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

Answer 3

Answer №2

If you're looking for a simpler way to add texture to your project, consider trying out textures in Three.js. Check out this interesting example:

Using textures can be a more efficient alternative to working with numerous vertices and managing their movements.

Best regards,

Gerdon

Answer 4

If you're looking for a simpler way to add texture to your project, consider trying out textures in Three.js. Check out this interesting example:

Using textures can be a more efficient alternative to working with numerous vertices and managing their movements.

Best regards,

Gerdon

Infinite forward grid movement with the power of three.js

Answer №1

Answer №2

Similar questions

How to Retrieve a Specific Line with jQuery

reasons why the keypress event may not be triggered

What is the output of the createRange() function?

Monitoring changes to localstorage in AngularJS

Is there a way to convert datetime format to date in a Vue component?

Node.js and Socket.IO: Managing responses

Can anyone explain to me why the data I'm passing as props to the React functional component is displaying as undefined?

"Prisma vs. Supabase: A Comparison of Image Uploading

angular2 and ionic2 encounter issues when handling requests with observable and promises

Localizing HTML number input values is not functioning properly

What does a transformed SVG element's getBoundingClientRect() method return?

JavaScript Object Notation, asynchronous JavaScript and XML, and Active Server Pages

Storing past entries in a local storage using JavaScript

Exploring Twig variables in Node.js with the node-twig package

JQuery is not able to render Hindi content properly

Verify the ng-if condition for a specific value and display an alternative option if the condition is not

Error with JSON data from the Twitch TV API

Utilizing webpack to import both d3 and d3-cloud libraries

Is there a correct way to accomplish this task? How could I go about achieving it?

Ensure that the response interceptor is executed only once, even when multiple API calls are