Basics về ThreeJS

Trước hết chúng ta cần hiểu WebGL là gì?

• WebGL (Web Graphics Library) là một thư viện đồ họa dành cho web. WebGL là một javascript API có thể sử dụng được trong HTML 5 thông qua thẻ canvas
• Hiểu đơn giảng chúng ta sẽ code để WebGL sử dụng các điểm và các đường
• Cơ bản về WebGL:
  • Các nền tảng
    • Vertices(Các đỉnh)
    • Indices(Các chỉ số)
    • Bufferes (Các bộ đệm
  • Các tọa độ: Không gian ba chiều (x,y,z)
  • Mesh(lưới)

Note: Ở mình thấy làm việc với thành phần nào cũng quan trọng như không thể thiếu thằng số 2 và số 3

Tiếp theo là thằng ThreeJS:

ThreeJS là thư viện JS sử dụng WebGL để vẽ 3D. WebGL sẽ build hình ảnh 3D dựa theo code ThreeJS để tạo nên các điểm, các đường. ThreeJS giúp chúng ta tạo hình ảnh 3D trên brower chỉ bằng code JS không cần phải tạo platform, application

ThressJS gồm có 3 phần:

+ Scene : Hiểu đơn giản là nó chứa tất cả mọi thứ hay hiểu theo cách lập trình là nó chưa mọi Object để tạo lên một hình ảnh 3D

+ Camera: Đơn giản hay coi như nó là một chiếc máy chiếu nó sẽ chiếu hết tất cả những gì trong thằng Scene có

+ Renderer: Thằng này có nhiệm vụ nhận đầu vào input là Camera và Scene, đầu ra là hình ảnh 3D hiện thị trên canvas của HTML5

+ ở hình ảnh trên còn có 2 thành phần Canvas vàMesh thì thằng Canvas chính là thẻ trong HTML5 còn thằng Mesh nó chính là một dạng mô tả những Object ảnh 3D dưới dạng lưới

Note: Tỉ lệ lưới càng dày hình ảnh càng chính xác

Ở bài này tôi sẽ không trình bày build thằng ThreeJS này theo cách code chay mà tôi sẽ build theo thằng Webpack

 Tôi sẽ không giải thích Webpack là gì mà tôi sẽ nói tại sao mình dùng nó:     

+ Khi ta chạy code trực tiếp khi cài thư viện ThreeJS vào nó sẽ rất nặng, vì vậy cần một máy chủ để xử lý ảnh, và sẽ giúp bảo mật hơn   

 + Mọi thứ đã được thằng Webpack cấu hình sẵn chúng ta chỉ việc import để sử dụng các hàm của nó

Note: Ở đây Webpack chạy trên môi trường nodejs

Cấu trúc của thằng Webpack như sau:

Gồm 1 file :

+ bundler: ở đây có 3 môi trường mình mới chỉ làm viêc với file webpack.dev.js chạy trên môi trường dev, webpack.prod.js chạy trên môi trường product

+ src: các file trong đây đã được cấu hình sẵn mình chỉ việc import thư viện và dùng

+ static: ở đây mình đang làm việc với ThreeJS xử lý ảnh hiểu nên mình thường để ảnh trong file này

Tôi sẽ bỏ qua bước cài đặt mà chỉ demo code luôn:

Những thành phần trong code mình sẽ giải thích thêm ở những phần bên dưới !

Đầu tiên mình sẽ tìm hiểu về Transform objects

Thằng này có 4 thuộc tính:

+ position (để di chuyển đối tượng)
+ scale (để di chuyển đối tượng)
+ rotation (để xoay đối tượng)
+ quaternion (cũng để xoay đối tượng; tìm hiểu thêm về điều đó sau)
Tất cả các thuộc tính này sẽ được truyền thông qua thằng PerspectiveCamera hoặc cũng có thể truyền qua thằng Mesh

Ở phần này tôi sẽ giới thiệu thêm 1 thành phần group và cube giúp có thể tạo ra nhiều ảnh 3D

Ví dụ truyền qua thằng Mesh

Ví dụ truyền qua thằng PerspectiveCamera

Note: Vì là sử lý ảnh 3D nên chúng ta sẽ làm việc nhiều với các tọa độ (x,y,z) và cũng có thể sử dùng hàm set(x,y,z) để set các giá trị

Animations

Khởi tạo 1 function và gọi nó để thực thi. Trong function mình sẽ gọi lại chính cái function đó (callback) thông qua hàm window.requestAnimationFrame(…) truyền vào 1 parameter chính là tên hàm Truyền các thuộc tính ở phần trên để có lấy được ảnh động Ngoài ra chúng ta có thể sử dụng thằng gsap “gsap.to(…)” nó hoạt động tương tự như truyền các thuộc tính vào mesh

Cameras

Phần này tôi đã nói rõ ở trên nên chỉ có code demo:

Như vậy là đã xong giờ bạn muốn truyền gì vào cho nó cũng được nó sẽ truyền giống thằng Material ở phần dưới tôi sẽ trình bày!

Những thao tác từ người dùng

Note: camera.propety

Full Screen and Resizing

Phần này chúng ta có thể cấu hình thông qua thằng css cũng được nhưng ở phần này tôi sẽ hướng dẫn mọi người có thể thay đổi kích thước của khung hình và vật thể

Note: khi ta thay đổi mọi vấn đề gì thì cần phải update lại

GeoMetries

Ví dụ ở đây tôi sẽ ví dụ khi ta làm việc với hình hộp ta sẽ sử dụng hàm BoxGeometry()

BoxGeometry có 6 thông số :

width: Kích thước trên xtrục

height: Kích thước trên ytrục

depth: Kích thước trên ztrục

widthSegments: Có bao nhiêu phân khu trong x trục

heightSegments: Có bao nhiêu phân khu trong y trục

depthSegments: Có bao nhiêu phân khu trong z trục

Ở đây chúng ta sẽ thấy có wireframe nó chính là hiện thị những đường phân cách của mỗi tam giác

Để tự tạo những hình cho riêng chúng ta sẽ dùng thằng Float32Array() để tạo các điểm

DebugUI

Cấu trúc để tạo 1 debug:

Cài đặt thư viện dat.gui thông qua nodejs

Ví dụ ở trên sẽ có những phần debug về chọn màu, đường cắt hình tam giác, ẩn hiện vật thể

Textures

Ở đây tôi sẽ hướng dẫn mọi người sử dụng thằng TextureLoader sẽ không phải dùng thuần JS nữa

Khởi tạo TextureLoader

Materials

Nó sẽ giúp bạn có thể thay đổi bất kì thuộc tính nào mà bạn mong muốn
Dưới đây là ví dụ:

Hoặc đổi map màu từ Textures

3D text

Mọi người có thể tìm thấy font chưa trong /node_modules/three/examples/fonts/

Trước khi dùng được chúng ta cần import typefaceFont from ‘three/examples/fonts/helvetiker_regular.typeface.json’

Tạo phông chữ:

Tạo hình cho chữ

Trên đây là toàn bộ nhưng thành phần cơ bản nhất để làm việc với thằng ThreeJS, mình mong mọi người có thể đọc và góp ý thêm cho mình!

You need to login in order to like this post: click here