Adjusting mesh rotation on elliptical curve using mousewheel scrolling

Question

Adjusting mesh rotation on elliptical curve using mousewheel scrolling

I have arranged several plane meshes in a uniform manner along an elliptical curve.

During the animation loop, I am moving them along the ellipse curve using curve.getPointAt with time delta and applying the matrix.

Additionally, I am attempting to incorporate scroll functionality by adding wheelY delta to the existing orbit of the planes.

However, when I add these delta values, it causes jittery movement and returning back to the original position, which is not ideal.

Any assistance on how to achieve this would be greatly appreciated!


// JavaScript code here
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("canvas"), antialias: true });
renderer.setClearColor(0xffffff);
//  use device aspect ratio //
renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window
renderer.setSize(window.innerWidth, window.innerHeight);

// Rest of the JavaScript code...


/* CSS code here */
html ,body {
overflow:hidden;
}


<!-- External script included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas id="canvas"></canvas>

javascript three.js lerp

Answer 1

Answer №1

The rotation of the object is based on time, which is why shifting has no effect. The position resets according to the current time. Instead of using time, consider using a variable for the angle increment. You can then add or subtract from this variable to adjust the position.
Make sure to set the `onwheel` event on the canvas element and not on the body.

var renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("canvas"),
  antialias: true
});
renderer.setClearColor(0xffffff);
// Use device aspect ratio //
renderer.setPixelRatio(window.devicePixelRatio);
// Set the size of the canvas to fit within the window
renderer.setSize(window.innerWidth, window.innerHeight);

// SCENE
var scene = new THREE.Scene();

// CAMERA
var camera = new THREE.PerspectiveCamera(2, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 220;
camera.position.y = 200;
camera.lookAt(0, 0, 0);


// ELLIPTIC CURVE 
let curve = new THREE.EllipseCurve(0, 0, 7, 5);
let line = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(100)),
  new THREE.LineBasicMaterial({
    color: "red",
  })
);
line.rotation.x = -Math.PI * 0.5;
line.position.x = 0;
scene.add(line);

// MESH
var geometry = new THREE.PlaneGeometry(1.3, 2.8);
var material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  side: THREE.FrontSide
});
var greenMaterial = new THREE.MeshBasicMaterial({
  color: 'orange',
  side: THREE.FrontSide
});

const caro_group = new THREE.Group();
scene.add(caro_group);

var image_count = 9;
var image_meshes = [];

for (let i = 0; i < image_count; i++) {
  if (i == 0)
    image_meshes[i] = new THREE.Mesh(geometry, greenMaterial);
  else
    image_meshes[i] = new THREE.Mesh(geometry, material);
  caro_group.add(image_meshes[i]);
}

var delta_y = 0;
let target_delta = 0;
let current_delta = 0;
const ease_delta = 0.075;
let shift = 0;
let shiftBy = (1 / 180);
let timeout = 10;

// Set the event on the canvas so that the entire HTML page won't scroll
canvas.onwheel = function(e) {
  // Cancel the event propagation
  // We only want the delta and none of the scrolling effects
  e.preventDefault();

  // Use the wheel delta to rotate meshes smoothly
  shift = (e.deltaY > 0) ? shiftBy * -6 : shiftBy * 2;
};

let clock = new THREE.Clock();
let v = new THREE.Vector3();
let ad = 0; // arc distance

// RENDER + ANIMATE
function animate() {
  // Rotation to be added based on mousewheel delta interpolation
  var rot_toadd = (target_delta - current_delta) * ease_delta;

  ad += (1 / 360) % 1;
  if (shift < 0 && ad < shift) {
    ad = 1 + shift;
  } else {
    if (shift < 0)
      timeout = 100;
    ad = (ad + shift) % 1;
  }
  shift = 0;


  for (let i = 0; i < image_count; i++) {
    var point = ((1 / image_count) * i + ad + rot_toadd) % 1;
    image_meshes[i].position.copy(curve.getPointAt(point, v));
    image_meshes[i].position.applyMatrix4(line.matrixWorld);
  }

  /* Render the scene and the camera */
  renderer.render(scene, camera);

  // Throttle update frequency
  setTimeout(() => {
    requestAnimationFrame(animate);
    timeout = 10;
  }, timeout);
}

requestAnimationFrame(animate);

// RESIZE EVENTS
window.addEventListener("resize", onResize);

function onResize() {
  width = window.innerWidth;
  height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

html,
body {
  overflow: hidden;
}

#info {
  position: fixed;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<div id=info>Use mousewheel to shift positions.</div>
<canvas id="canvas"></canvas>

Answer 2

The rotation of the object is based on time, which is why shifting has no effect. The position resets according to the current time. Instead of using time, consider using a variable for the angle increment. You can then add or subtract from this variable to adjust the position.
Make sure to set the `onwheel` event on the canvas element and not on the body.

var renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("canvas"),
  antialias: true
});
renderer.setClearColor(0xffffff);
// Use device aspect ratio //
renderer.setPixelRatio(window.devicePixelRatio);
// Set the size of the canvas to fit within the window
renderer.setSize(window.innerWidth, window.innerHeight);

// SCENE
var scene = new THREE.Scene();

// CAMERA
var camera = new THREE.PerspectiveCamera(2, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 220;
camera.position.y = 200;
camera.lookAt(0, 0, 0);


// ELLIPTIC CURVE 
let curve = new THREE.EllipseCurve(0, 0, 7, 5);
let line = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints(curve.getSpacedPoints(100)),
  new THREE.LineBasicMaterial({
    color: "red",
  })
);
line.rotation.x = -Math.PI * 0.5;
line.position.x = 0;
scene.add(line);

// MESH
var geometry = new THREE.PlaneGeometry(1.3, 2.8);
var material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  side: THREE.FrontSide
});
var greenMaterial = new THREE.MeshBasicMaterial({
  color: 'orange',
  side: THREE.FrontSide
});

const caro_group = new THREE.Group();
scene.add(caro_group);

var image_count = 9;
var image_meshes = [];

for (let i = 0; i < image_count; i++) {
  if (i == 0)
    image_meshes[i] = new THREE.Mesh(geometry, greenMaterial);
  else
    image_meshes[i] = new THREE.Mesh(geometry, material);
  caro_group.add(image_meshes[i]);
}

var delta_y = 0;
let target_delta = 0;
let current_delta = 0;
const ease_delta = 0.075;
let shift = 0;
let shiftBy = (1 / 180);
let timeout = 10;

// Set the event on the canvas so that the entire HTML page won't scroll
canvas.onwheel = function(e) {
  // Cancel the event propagation
  // We only want the delta and none of the scrolling effects
  e.preventDefault();

  // Use the wheel delta to rotate meshes smoothly
  shift = (e.deltaY > 0) ? shiftBy * -6 : shiftBy * 2;
};

let clock = new THREE.Clock();
let v = new THREE.Vector3();
let ad = 0; // arc distance

// RENDER + ANIMATE
function animate() {
  // Rotation to be added based on mousewheel delta interpolation
  var rot_toadd = (target_delta - current_delta) * ease_delta;

  ad += (1 / 360) % 1;
  if (shift < 0 && ad < shift) {
    ad = 1 + shift;
  } else {
    if (shift < 0)
      timeout = 100;
    ad = (ad + shift) % 1;
  }
  shift = 0;


  for (let i = 0; i < image_count; i++) {
    var point = ((1 / image_count) * i + ad + rot_toadd) % 1;
    image_meshes[i].position.copy(curve.getPointAt(point, v));
    image_meshes[i].position.applyMatrix4(line.matrixWorld);
  }

  /* Render the scene and the camera */
  renderer.render(scene, camera);

  // Throttle update frequency
  setTimeout(() => {
    requestAnimationFrame(animate);
    timeout = 10;
  }, timeout);
}

requestAnimationFrame(animate);

// RESIZE EVENTS
window.addEventListener("resize", onResize);

function onResize() {
  width = window.innerWidth;
  height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
}

html,
body {
  overflow: hidden;
}

#info {
  position: fixed;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<div id=info>Use mousewheel to shift positions.</div>
<canvas id="canvas"></canvas>

Adjusting mesh rotation on elliptical curve using mousewheel scrolling

Answer №1

Similar questions

Unable to refresh JSON data in Datatables

When utilizing Vue JS, each key value of one computed property can trigger another computed property to run

How to use ngModel directive in Angular to select/unselect dynamically generated checkboxes and retrieve their values

Decipher the JSON data for a Facebook cover photo

Sending back the requested information in C to the ajax (jquery) CGI

Steps for showing an error prompt when input is invalid:

Node.js: Changing binary information into a readable string

After removing an item from the component in reactJS, the immediate rendering of the dynamic component does not seem to be functioning correctly

Dispatch prop within useEffect

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

navigation menu 'selective emphasis' feature

Two conflicting jQuery plugins are causing issues

Showing only the objects that are marked as true in the component (React)

Graph is vanishing while linked

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

Mutating properties in VueJs

How can I preserve the file extension of an ejs file as .html?

The img-wrapper is failing to show the PNG image

:onchange event triggering iteration through a function

Creating a javascript function to update content on click