What is a Clock object

If you are familiar with JavaScript, you must be familiar with the JavaScript time object Date. Clock essentially encapsulates Date and provides some methods and properties

When you use Threejs to write time-dependent programs, you don’t need to encapsulate Date. Instead, you can call Clock methods and properties

The main properties and methods of the Clock object

  • attribute.autoStart, Boolean, the default value istrueIf it is set totrue, in the first timeupdateTo enable the Clock Clock
  • attribute.startTime , Float, last call to store Clock.start()..getElapsedTime()or.getDelta()Method time
  • attribute.elapsedTime , Float, saves the total running time of the Clock
  • attribute.running Boolean, check whether the Clock is running
  • methods.start(), start the clock at the same timestartTimeandoldTimeSet to the current time, setelapsedTimeIs 0 and setrunningfortrue
  • methods.stop(), stop the clock while willoldTimeSet to the current time
  • methods.getElapsedTime(), gets the number of seconds since the clock startedoldTimeSet to the current time ifautoStartSet totrueIf the clock is not running, start the clock at the same time
  • methods.getDelta()To obtain theoldTimeAfter setting to the current number of seconds, willoldTimeSet to the current time ifautoStartSet totrueIf the clock is not running, start the clock at the same time

Common methods: getDelta()

  • Gets the interval between two executions of the method
  • Suppose you do it once.getDelta ()Method, execute it again.getDelta ()Method is executed a second time.getDelta ()Method returns the time interval, in seconds, between the last call to this method

Simple application scenario: An understanding of Threejs rendering

  • The rendering method of Threejs renderer.render()Each time you execute it, you get a frame of the image, and the render effect, that is, the image is displayed on the Canvas Canvas
  • If a 3D scene is constantly changing, it must be invoked periodically.render()Method to update the canvas canvas to display content, so that an animation effect is displayed
  • To perform the renderer rendering method periodically.render(), usually through the browser’s APIwindow.requestAnimationFrameThe browser controls the frequency of rendering
  • Under the condition of ideal performance, 60 times of rendering per second is about. In actual projects, if the scene to be rendered is complex, it will generally be lower than 60, that is, the time interval between two frames of rendering is greater than 16.67ms
  • Code examples:
Clock var Clock = new three.clock (); Function render() {renderer.render(scene, camera); RequestAnimationFrame (render); //clock.getDelta() returns the interval between two frames in seconds var T = clock.getDelta(); Console. log(' two frames render interval ',T*1000+' milliseconds '); Console. log(' view render rate per second ',1/T); } render();Copy the code

aboutrequestAnimationFrame()methods

  • window.requestAnimationFrame(callback)Tell the browser that you want to execute an animation and ask the browser to call the specified callback to update the animation before the next redraw
  • This method takes as an argument a callback function that is executed before the browser’s next redraw
  • You should call this method when you are ready to update the animation. This will cause the browser to call the animation function you passed to the method (your callback) before the next redraw.
  • Callbacks are typically executed 60 times per second, but in most browsers that follow W3C recommendations, the number of callbacks usually matches the number of browser screen refreshes
  • In order to improve performance and battery life, so in most browsers, whenrequestAnimationFrame()Run in background TAB or hidden<iframe>In,requestAnimationFrame()Pauses are invoked to improve performance and battery life
  • parameter

    Callback, the function called to update the animation frame before the next redraw (the above callback) is passed the DOMHighResTimeStamp parameter, which returns the same value as performing.now (), This represents the time when requestAnimationFrame() starts executing the callback function

  • The return value

    A long integer, request ID, is the only callback list identification is a non-zero value, no other meaning, you can send this value to the window. The cancelAnimationFrame () to cancel the callback function

usesetInterval()andrequestAnimationFrame()The advantages and disadvantages of method drawing

  • Of course the use ofsetInterval()Method can be animated but,setInterval()The method has certain disadvantages

    The setInterval() method, regardless of what’s going on in the browser, will still be called every few milliseconds if you’re browsing another page. In addition, the setInterval() method is not synchronized with the redrawing of the display, which can result in high CPU usage and low system efficiency. — Three.js Development Guide

  • userequestAnimationFrame()Function to solve the above problem, see above for detailsrequestAnimationFrame()Function description, this function interval is defined by the browser, we can specify the function inside the painting operation

Used in VUErequestAnimationFrame()methods

Be sure to pass in the function name instead of an immediate execution symbol, such as requestAnimationFrame(this.animate)

See the documentation ———— three.js Clock

I’m FX67ll.com. If you find anything wrong with this article, please comment on it in the comments section. Thank you for reading! If you like this article, welcome to visit my github warehouse address, for me to click a Star, Thanks~ 🙂 forward please note the reference article address, very thank you!!