Animasi Path Camera pada Three.Js

 

Path camera merupakan bagian fitur camera yang berfungsi untuk mengatur garis edar camera dengan hanya mengarahkan kursor saja. Fitur ini telah tersimpan pada file library three.js. file tersebut berisikan script-script java yang menginisialisasi fungsi parameter agar bisa dipanggil oleh script html. Fungsi parameter tersebut ditunjukkan dalam script:

THREE.PathCamera = function ( parameters ) {

Fungsi tersebut telah tersimpan dalam file path camera. Kemudian agar file html dapat memanggil fungsi yang ada dalam file tersebut, perlu dilakukan pendeklarasian perintah pada file html dengan cara mengetikkan perintah berikut:

camera = new THREE.PathCamera( {
Berikut contoh script html yang dapat memanggil fungsi parameter yang ada pada path camera.

10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30.

<script type=”text/javascript” src=”../build/Three.js”></script><script type=”text/javascript” src=”js/Stats.js”></script> <script type=”text/javascript” src=”js/Tween.js”></script> <script type=”text/javascript”> var statsEnabled = true; var container, stats; var camera, scene, renderer; var cross; init(); function init() { scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0xffffff, 0.002 ); var waypoints = [ [ -1000, 0, 0 ], [ 0, 200, 0 ], [ 1000, 0, 0 ] ]; camera = new THREE.PathCamera( { fov: 100, aspect: window.innerWidth / window.innerHeight, near: 1, far: 1000, waypoints: waypoints, duration: 28, useConstantSpeed: true, resamplingCoef: 1, createDebugPath: true, createDebugDummy: true, lookSpeed: 0.0006, lookVertical: true, lookHorizontal: true, verticalAngleMap:{srcRange:[0.00, 6.28],dstRange:[1.1, 3.8] }, horizontalAngleMap:{srcRange:[0.00, 6.28], dstRange:[0.3, Math. PI-0.3]} } ); </script>

Dalam file path camera diatas, terdapat beberapa parameter yang berfungsi menyimpan data agar nantinya bisa dipanggil oleh file html. Parameter tersebut antara lain:

-          Fov : merupakan parameter yang menyimpan data tentang permulaan jarak pandang camera dalam melihat objek.
-          Aspect : merupakan parameter yang menyimpan data tentang pandangan kamera pada windows. Misal “aspect: window.innerWidth / window.innerHeight”, berarti pandangan kamera tersebut masuk kedalam windows.
-          Near : merupakan parameter yang menyimpan data tentang jarak edaran kamera dengan objek  ketika  mendekati objek.
-          Far : merupakan parameter yang menyimpan data tentang jarak minimal pandangan kamera bisa melihat suatu objek
-          Waypoints : merupakan parameter yang menyimpan data tentang koordinat titik edaran kamera mulai berjalan.
-          Duration :             merupakan parameter yang menyimpan data tentang kecepatan durasi waktu persecond edaran kamera terhadap objek
-          useConstantSpeed: merupakan parameter yang menyimpan data tentang kecepatan edara camera, apakah kecepatannya konstan atau sesuai dengan kecepatan gerak cursor.
-          lookSpeed: merupakan parameter yang menyimpan data tentang kecepatan edar pandangan kamera yang ditetapkan.
-          lookVertical: merupakan parameter yang menyimpan data tentang arah edar kamera secara vertikal
-          lookHorizontal: merupakan parameter yang menyimpan data tentang arah edar kamera secara horizontal
-          verticalAngleMap: merupakan parameter yang menyimpan data tentang permulaan pemetaan koordinat sudut vertikal
-          horizontalAngleMap: merupakan parameter yang menyimpan data tentang permulaan pemetaan koordinat sudut horizontal.