Three.js – Bài 2: Dịch chuyển đối tượng 3D – Controls

Tram Ho

Tiếp theo phần làm quen với ThreeJS, bài này sẽ là làm quen với 1 vài controls (điều khiển) trong ThreeJS nhé. Tiếp tục từ PJ lần trước: https://codepen.io/bunnypi04/pen/xxVOmyy
Để mở đầu cho bài viết, mời các bạn ghé qua xem demo lấy động lực: https://threejs.tothemoon-min.com/

Dưới đây là source cơ bản cho bài viết này:

Responsive canvas

Nếu mọi người thử responsive cho window của chúng ta, chẳng hạn thu nhỏ Chrome lại rồi kéo dãn thu nhỏ các chiều của trình duyệt, thì bạn sẽ thấy là Object của chúng ta như kiểu bị ‘position: fixed’ trên màn hình vậy, ko hề thu phóng hay đổi vị trí. Giờ Refresh lại, thấy object lại về đúng ở giữa rồi. CHú ý 1 chút thì sẽ nhận ra là cái nền màu đen (là màu xanh ở trong codepen cho đẹp) bị giữ nguyên kích thước của lúc load ra, tức là canvas khi bạn load page đã được tính toán kích cỡ rồi, không thay đổi khi bạn responsive màn hình. Kéo theo đó là mọi thứ trong canvas (cụ thể là cái hình Sphere) sẽ cố định theo canvas này. Lý do thì là vì đoạn code này:

Tức là khi render đã xác định kích cỡ Canvas rồi.

Trong trường hợp bạn thích thế thì chả sao cả, nhưng nếu mà muốn nó responsive, mình sẽ hướng dẫn.

Đầu tiên tất nhiên là phải bắt được sự kiện responsive màn hình, ở đây sẽ sử dụng eventListener

Giải thích: Chúng ta bắt sự kiện thay đổi của web app, mỗi khi có sự thay đổi, sẽ set lại màn hình như khi bắt đầu render: chiều rộng chiều dài và tỉ lệ perspective camera. Lúc này hàm camera.updateProjectionMatrix sẽ thực hiện công viện update kích cỡ canvas cho bạn.

Sử dụng con trỏ (chuột) để xoay

Hình ảnh gif chất lượng ko cao nên có thể bạn thấy ko được rõ lắm, nhưng chắc cũng thấy mờ mờ: mình sử dụng chuột click vào khối 3D của mình và kéo qua lại, khối ấy được xoay qua lại theo con chuột. Nhìn tưởng phức tạp thế thôi chứ ThreeJs có sẵn hỗ trợ rồi: 1 dòng code + 1 dòng khai báo thư viện

Để trải nghiệm trước khi làm, các bạn vào đây nhé: https://threejs.org/examples/?q=control#misc_controls_orbit

Để sử dụng được tool, trước tiên là cần import tool vào đã:

  • Nếu bạn đã tải souce ThreeJS về máy, hãy vào theo directory sau: three.js-master/examples/js/controls/OrbitControls.js và copy file này vào folder PJ của bạn
  • Nếu chỉ muốn dùng link cdn thôi, thì import link này nhé: https://threejs.org/examples/js/controls/OrbitControls.js

Và nhớ insert link đường dẫn tới file OrbitControls vào header của Project nhé.

Giờ là 1 dòng code duy nhất:

Giờ hãy refresh lại và thử thành quả nhé https://codepen.io/bunnypi04/pen/VwaVzow

Thoạt qua bạn sẽ nghĩ là chúng ta đang di chuyển khối hình, nhưng thử dùng chuột phải và di chuyển mà xem, có gì đó sai sai =)). Trên thực tế, chúng ta đang di chuyển là cái center point của không gian 3D, hay là chúng ra đang xoay cả vũ trụ canvas 😄

Drag – Di chuyển đối tượng

https://threejs.org/examples/?q=controls#misc_controls_drag

Tiếp theo OrbitControls là 1 Control khác, đó là DragControls. Như cái tên của nó, bạn có thể drag, drop các item trong phạm vi canvas. Và tất nhiên là chúng ta có tool =))

Việc trước hết tất nhiên là cài tool: vẫn như trên, khai báo đường dẫn tới file DragControls.js: https://threejs.org/examples/js/controls/DragControls.js Hoặc copy từ thư mục Example trong source Three.js

Việc thứ 2 thì lại là 1 dòng code:

Ở đây khác với Orbit, bạn phải truyền thêm đối tượng vào nữa. Những đối tượng nào có thể move thì sẽ bỏ vào 1 mảng, và insert mảng vào trong controls để sử dụng drag. Và thành quả là đây:
https://codepen.io/bunnypi04/pen/KKzbPmo?editors=0010

Pointer Lock control – di chuyển trong không gian 3D

Mở đầu lại bằng 1 ví dụ cho hứng thú: https://threejs.org/examples/?q=controls#misc_controls_pointerlock

Với Control pointer lock này, việc tạo sẽ phức tạp hơn ‘1 dòng code’ ở trên. Trước tiên thì link thư viện là https://threejs.org/examples/js/controls/PointerLockControls.js để mọi người import.

Giải thích 1 chút, ở đây mình sẽ làm 1 việc đấy là khi bạn click vào canvas, thì màn hình sẽ lock tâm là vị trí con chuột của bạn. Giống như kiểu các tranh 360 độ trên face book ấy. Muốn thoát ra khỏi trạng thái lock thì chỉ cần bấm Esc.

Đầu tiên thì khai báo controls 1 dòng như mọi lần:

Để có thể lock camera, cần 1 cú click, vì vậy cần define vùng click để kích hoạt sự kiện này. Ở đây mình chọn luôn thẻ Body, đặt id là ‘body’ luôn:

Cuối cùng là lắng nghe sự kiện click để lock camera:

Giờ thì bạn có thể test lock camera rồi

Demo của mình đây, nhớ là bấm Esc để thoát lock camera nhé:
https://codepen.io/bunnypi04/pen/LYNMYYR

Trackball – xoay không gian

Với Orbit control, nếu bạn test vài lượt sẽ nhận ra là khả năng di chuyển bị giới hạn trong 1 khoảng nhất định. Để có thể di chuyển camera quanh vật thể 1 cách đầy đủ nhất, phải sử dụng tới trackball
https://threejs.org/examples/?q=controls#misc_controls_trackball

Để khai báo thư viện, thì sẽ sử dụng thư viện Trackball ConTrols: https://threejs.org/examples/js/controls/TrackballControls.js

Việc khai báo thì gần như giống với ở trên, chỉ cần truyền 2 params là camera và render dom Element là được:

Giờ thì lằng nhằng hơn ở trên 1 tẹo là cần thêm update controls để có thể move nữa, hãy thêm vào function update nhé:

Vậy là hiểu thêm được 1 controls nữa:
https://codepen.io/bunnypi04/pen/QWNzjaR?editors=0010

Kết

Bài tiếp theo mình sẽ bắt đầu “trang trí” cho các khối hình, mọi người hãy chờ xem nhé

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo