Cách làm tan chảy một đối tượng 3D với ba.js

Sep 11, 2025

Cách

Web như chúng ta biết, không ngừng thay đổi và phát triển. Những gì chúng ta vẫn có thể nhớ là một phương tiện đơn giản và đơn giản đã tăng một chiều khác một vài năm trước, và nó cũng không dừng lại ở đó. Cho một người tạo ra trang web , những gì đã từng là một phần của các hiệu ứng hình ảnh của bộ phim khoa học viễn tưởng hiện trên một máy tính bảng nằm trên chiếc ghế dài của bạn, và có các tòa nhà được bao phủ trong các cài đặt tương tác quy mô lớn thực sự chỉ là toàn màn hình Google Chrome Windows.

Thực hiện theo các bước dưới đây để tìm hiểu cách tạo hiệu ứng nóng chảy thực tế với ba.js.

01. Thiết lập cảnh Three.js

Đi trước và lấy thư viện ba.js và đưa nó vào trang web của bạn. Bạn sẽ cần khởi tạo WebGlRenderer, cảnh và PerspectiveCamera. Sau khi những thứ này được khởi tạo, bạn sẽ cần phải hiển thị cảnh trên Yêu cầu tuyệt vời .

02. Thêm ánh sáng vào cảnh

Tiếp theo, đèn cần được thêm vào cảnh 3D. Trong ví dụ này, hai đèn sẽ được sử dụng: đèn xung quanh và đèn điểm. Ánh sáng xung quanh đóng vai trò là màu toàn cầu tổng thể cho cảnh, trong khi ánh sáng điểm sẽ phát ra ánh sáng giảm dần với khoảng cách. Điều này sẽ cung cấp cho cảnh một số tương phản.

 var Ambierslight = New Three.ambientlight (0xccccccc);
cảnh.add (Ambierslight);
var pointlight = mới ba.pointlight (0xffffff, 1);
Pointlight.Pocation.set (10, 5, 0);

03. Tải mô hình 3D

Bây giờ cảnh đã được thiết lập, mô hình 3D cần được tải vào. Mô hình có thể được tải bằng bất kỳ định dạng được hỗ trợ nào (JSON, OBJ, DAE, v.v.). Dưới đây là một ví dụ về việc tải mô hình DAE. Trong ví dụ này, điều rất quan trọng là mô hình có đủ đa giác để thực hiện các sửa đổi đỉnh.

Hộp sọ hươu đang được sử dụng trong ví dụ này có 3.500 polys. Nếu số lượng poly quá thấp, các hình động đỉnh sẽ quá rõ ràng và bị bóp méo.

 Loader = mới ba.colladaloader ();
Loader.Load ('Dae / Deer_Skull / Deer_skull.dae', OnloadCompletehandler);

04. Thêm bản đồ Bump

Bump Maps là hoàn hảo để thêm độ sâu vào kết cấu của bạn với chi phí thấp. Khi bạn đã tạo hình ảnh Bump Map của mình, bạn có thể thực hiện nó bằng cách áp dụng nó vào tài liệu như dưới đây. Ngoài ra, bạn sẽ cần điều chỉnh tỷ lệ của bản đồ Bump của bạn để phù hợp với quy mô của mô hình của bạn.

 Vật liệu.Bumpmap = 'IMG / Deer_Skull / Deer-Bump.jpg';
Tài liệu.Bumpscale = .008;

05. Sử dụng bộ phim hoạt hình Vertex

Trong toàn bộ trang web của mình, Johnny sử dụng một phần mở rộng trò chơi của Jerome Etienne cho ba.js giúp dễ dàng thực hiện hoạt hình đỉnh. Tiện ích mở rộng này cho phép dễ dàng truy cập vào mỗi đỉnh của một mô hình ở tốc độ khung hình, làm cho nó đơn giản để thao tác các đỉnh bằng cách sử dụng các dạng sóng.

Các Tiện ích mở rộng hoạt hình đỉnh có sẵn thông qua GitHub của Etienne. Chúng tôi sẽ tiến xa hơn về cách nó được sử dụng trong các bước tiếp theo.

Users can interact with the 3D model and view from multiple angles — Người dùng có thể tương tác với mô hình 3D và xem từ nhiều góc độ

06. Bắt đầu nóng chảy.

Làm tan chảy một mảnh hình học liên quan đến một vài bước tổng thể. Đầu tiên, mỗi điểm được liên tục đẩy xuống dưới. Khi một điểm chạm tới mặt đất, nó đã bị đẩy ra ngoài bằng cách sử dụng những gì chúng ta sẽ gọi là 'Push Vector'.

Tiếp theo, chúng tôi sẽ đưa ra những điểm thu thập dọc theo đáy một độ dày để hình học tan chảy không hoàn toàn phẳng. Để đạt được điều này, Johnny đã chuyển mã từ Shader VFX của Skeel Lee ở Houdini và sửa đổi nó.

07. Bắt đầu di chuyển các đỉnh xuống dưới

Dưới đây là một ví dụ sử dụng sử dụng bộ phim hoạt hình đỉnh để liên tục đẩy hình học của mô hình về phía mặt đất.

 var cetexanomation = New bax.vertexAnimation (hình học, chức năng (nguồn gốc, vị trí, delta, bây giờ) {position.y - = meltamount * crazyheight;}

Điều này sẽ đẩy điểm xuống theo tỷ lệ được xác định bởi Meltamount. . Hãy nhớ gọi 'Cập nhật' trên hình ảnh động Vertex của bạn trong chu trình kết xuất.

08. Xác định vectơ đẩy

Khi một điểm đã đạt đến mặt đất, nó cần phải được đẩy ra ngoài để đạt được hiệu quả tan chảy. Mã dưới đây đang xác định hướng nào trong trục X và Z để đẩy đỉnh để bạn có được sự dịch chuyển thống nhất. Điều kiện đảm bảo rằng chỉ những điểm đã đạt đến giới hạn thấp nhất của mô hình (mặt đất) được đẩy ra ngoài.

nếu (vị trí.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Thêm (bbox.min.clone ()). Dividescalar (2.0);
PushVector = position.clone (). phụ (centroid);
PushVector.y = 0; }

09. Làm tan chảy cảm giác tự nhiên

Mã dưới đây sử dụng tiếng ồn để tạo ngẫu nhiên trong chuyển động để tan chảy có khả năng hữu cơ. Các biến tiếng ồn có thể được điều chỉnh để có được hiệu ứng mong muốn. Tiếng ồn sau đó được áp dụng cho vectơ đẩy cùng với Meltamount. và Truyền hình để kiểm soát tốc độ và kích thước của hồ bơi tan chảy. Vectơ bên ngoài này cuối cùng đã được tính toán và sau đó áp dụng cho chính đỉnh.

 var n = noiseamplitude * generator.getval ((vị trí.x) * tiếng ồn + tiếng ồn);
var rawardvector = pushvector.multiplyscalar (((meltamount * spearamount) + n) * ra bên ngoài);
vị trí.add (ra bên ngoài);

10. Đưa độ dày hồ bơi tan chảy

Mã giải thích cho đến nay sẽ đạt được hiệu ứng tan chảy, nhưng hai điều là sai với nó. Đầu tiên, hồ bơi sẽ cảm thấy khá phẳng, bởi vì tất cả các điểm đã tan chảy với cùng một vị trí y. Thứ hai, vì tất cả đều chia sẻ cùng một y, quá nhiều điểm sẽ được xếp chồng lên nhau ở cùng một chiều cao, có thể gây nhấp nháy. Để tránh điều này, độ dày được áp dụng ở tốc độ tan chảy:

 Vị trí.Y + = Meltamount * PoolThickness;

11. Hãy thử nó trên các mô hình khác

Với mã ở trên, bất kỳ mô hình nào có đủ đa giác có thể bị tan chảy. Tải xuống một tệp zip ra mã đây và trao đổi mô hình với bất cứ thứ gì bạn muốn. Chúc vui vẻ!

Bài viết này ban đầu xuất hiện trong Nhà thiết kế web Vấn đề 265. Mua nó đây .

Những bài viết liên quan:

Tạo hình ảnh 3D tương tác với ba.js
Các công cụ màu sắc tốt nhất cho các nhà thiết kế web
Coi chừng tiên tiến thiết kế web

Cách làm tan chảy một đối tượng 3D với ba.js

01. Thiết lập cảnh Three.js

02. Thêm ánh sáng vào cảnh

03. Tải mô hình 3D

04. Thêm bản đồ Bump

05. Sử dụng bộ phim hoạt hình Vertex

06. Bắt đầu nóng chảy.

07. Bắt đầu di chuyển các đỉnh xuống dưới

08. Xác định vectơ đẩy

09. Làm tan chảy cảm giác tự nhiên

10. Đưa độ dày hồ bơi tan chảy

11. Hãy thử nó trên các mô hình khác

Cách - Các bài báo phổ biến nhất

Xây dựng cổng thông tin khách hàng với WordPress

Làm thế nào để vẽ một con mèo

Tiến hành kiểm tra người dùng miễn phí và nhanh chóng với UserLook

Hướng dẫn về Công cụ web của Google

Dòng Kẻ hủy diệt là gì?

Cách vẽ cảnh quan thành phố với các khối màu

Cách thực hiện vụ nổ lớn với V-Ray

Tạo kết cấu sẵn sàng trò chơi bằng cách sử dụng họa sĩ chất

Thể loại