What is the correct way to move the Plane?

Questions
1

In the example below, I have four planes whose position should be tied to the scroll. I don’t understand how to properly move the left and right side after I rotated them.

Code 
import * as THREE from 'three';

const app = document.getElementById('app');

let width = 0,
  height = 0;

const renderer = new THREE.WebGLRenderer();
app.prepend(renderer.domElement);

const distance = 100000;
const camera = new THREE.PerspectiveCamera();
camera.position.z = distance;
camera.far = distance * 2;

const scene = new THREE.Scene();

const planes = [
  new THREE.Plane(),
  new THREE.Plane(),
  new THREE.Plane(),
  new THREE.Plane(),
];

planes.forEach((plane) => {
  const helper = new THREE.PlaneHelper(plane, 300);
  scene.add(helper);
});

function tick() {
  renderer.render(scene, camera);

  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);

function resize() {
  width = app.clientWidth;
  height = innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.fov = 2 * Math.atan(height / 2 / distance) * (180 / Math.PI);
  camera.updateProjectionMatrix();
}

addEventListener('resize', resize);
resize();

function scroll() {
  const scrollPos = app.scrollTop;

  // ⬆
  planes[0].normal.y = -1;
  planes[0].normal.x = 0;
  planes[0].constant = height / 4 + scrollPos;

  // ⬅ ❓
  planes[1].normal.x = -1;
  planes[1].constant = width / 4;

  // ⬇
  planes[2].normal.y = 1;
  planes[2].normal.x = 0;
  planes[2].constant = height / 4 - scrollPos;

  // ➡ ❓
  planes[3].normal.x = 1;
  planes[3].constant = width / 4;
}

app.addEventListener('scroll', scroll);
scroll();

g1

2

Or does it make no sense for me to move the right and left sides since they are endless?:thinking:
In general, I need to clip the sliders.

3

yes your left and right planes will extend infinitely into +,-Y & +,-Z, they don’t need to be moved up and down like the top and bottom which again extend infinitely into +,-X & +,-Z

2 Likes