javascript - Smooth click zoom I/O for THREE JS on transitions -

Hi, I have been trying for some time to animate an infection between the scenes in JS, I clean place And rebuild the next one, although the actual change for each other is really pain relief, I have created 2 functions:

  function zoom intransition () {var zInMin = 15; (Camera.fov; camera.fov & gt; zInMin; camera.fov- = 3) {camera.updateProjectionMatrix (); }} Function zoomOutTransition () {var zOutMax = 70; (Camera.fov; camera.fov & lt; zOutMax; camera.fov + = 3) {camera.updateProjectionMatrix (); }}  

I run every such function:

Button response () {for class = "snippet-code-js lang-js prettyprint-override" (Var i in objects) {switch (object [i] .name) {case "door_1": zoomInTransition (); Start (room2); Zoom Out Transition () Break; Case "door_2": Zoom intrusion (); Start (room1); Zoom Out Transition () Break; Default: console.log ("default"); }; }; }

Although I never manage to make the zoom transition smooth, it runs fast to display the projection matrix update . I'm going out of ideas ... any suggestions would be appreciated. Thank you.

It is a bit late, but ... you can create an assistant function "transition" For example, if you want to zoom (20), for example, if you want to zoom in (20), you call the transition, which is very much like 10 x zoom (2), which will call zoom in small amounts until you reach the zoom Will quickly call one after another, which will create the illusion of smooth transition

transition function with zoom function Um in () (if (camera.fov> min zoom) {dom.zoomOut.css ('opacity', 1); transition (cameraZoomIn, 20);} if (camera.fov-20 = maxZoom) {dom.zoomOut.css ('opacity', 0.2);}} // small zoom function camera zoom in (volume) { Camera.fov - = quantity; camera.updateProjectionMatrix ();} // small zoom function camera zoomout (quantity) {camera.fov + = quantity; Camera.updateProjectionMatrix (); } // Create a transition for movement func (left, up, zoom, ...) where the func amount should go with the volume function transition (func, volume) {var intervalTime = 15; // We make a small version of the same movement: 1/10 of the original quantity every interval time interval = set interval (function () (function (quantity / 10)}, interval time); // we prevent movement When we set a small movement of timeout 10 times (function () {clear interval (interval)}, interval * 10)}