Three.js scene rendered controlled by mouse scroll?

Question

I'm trying to control the movement of animated objects in a scene by mapping them directly to the mouse scroll.

The desired effect would be a scene which has a some objects moving but the scenes progress/movement is correlated directly to the .scrollTop() distance.

The desired interaction would be something similar to this example: http://prinzhorn.github.io/skrollr-path/, but with a three.js scene.

Is this possible to control a three.js scene timing with the .scrollTop() distance?

I had worked with trackballcontrol, one of the approach could be when you scroll the mouse in the scene, you capture the camera move and move the object with the camera coordinate in the scene. Since you are already in the 3d scene, I do not think scrolltop is a good way to solve it — lhrec_106

ArUn ArUn · Accepted Answer · 2016-05-30T13:54:26

You can you Event Listener to achieve it , Render the scene when the mouse is scrolled.

document.getElementById("myDIV").addEventListener("wheel", myFunction);

function myFunction() {
   renderer.render(scene,camera);
}

Three.js scene rendered controlled by mouse scroll?

1 Answers