Cách xây dựng ứng dụng AR

Sep 14, 2025

Cách

Trang 1/3:

Xây dựng ứng dụng AR: Các bước 01-10

Xây dựng ứng dụng AR: Các bước 01-10
Xây dựng ứng dụng AR: Các bước 11-20
Cách tạo một điểm đánh dấu AR tùy chỉnh

Trong hai năm qua, đã có một vụ nổ trong mối quan tâm xung quanh VR và Ar Technologies. Những điều lớn mới nhất trong thiết kế thử nghiệm , AR cũng đã đến trên web, nhưng với công nghệ mới này đến các kỹ năng mới, và ngay bây giờ nó cảm thấy như miền tây hoang dã không có tiêu chuẩn lớn để theo dõi.

Khả năng hiển thị 3D trên web không có gì mới, nhưng nếu bạn đang tránh nó, thì bạn cần phải nhảy vào các công nghệ như Three.js hoặc A-Frame (hãy xem xét trang của chúng ta Công cụ AR để thử cho một danh sách đầy đủ).

Bất cứ mức độ kỹ năng nào bạn đang ở, nó sẽ không tạo ra nhiều khác biệt nếu bạn không có nội dung tốt. Hãy suy nghĩ về các trường hợp sử dụng thích hợp cho AR trước khi nhảy vào. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo trải nghiệm AR đa điểm.

Cảm thấy mức độ kỹ năng của bạn không hoàn toàn với nó? A. người tạo ra trang web sẽ tạo một trang web cho bạn mà không cần phiền phức. Hoặc nếu bạn đang lặn với một trang web phức tạp, hãy lấy web hosting đúng.

Bằng cách sử dụng nhiều điểm đánh dấu, có thể hiển thị các giai đoạn khác nhau của một quy trình hoặc bất kỳ nội dung độc đáo nào dựa trên điểm đánh dấu đó. Trong ví dụ này, ứng dụng của chúng tôi sẽ khám phá chu trình nước. Chuyển đến trang 3 để tìm hiểu cách tạo một điểm đánh dấu AR tùy chỉnh.

01. Bắt đầu

Mở khởi đầu thư mục trong IDE của bạn và bên trong index.html. Trang Tìm thẻ Script. Tất cả các mã trong hướng dẫn sẽ đi vào trong những mã này. Để kiểm tra ứng dụng, bạn sẽ cần có một máy chủ và nếu bạn muốn kiểm tra trên điện thoại, bạn sẽ cần lưu trữ các tệp trên máy chủ HTTPS. Thêm các biến ban đầu trong các thẻ script:

 var model1, model2, model3, đếm = 0,
  các hạt, particlecount, hệ thống hạt;
  var loader = mới ba.colladaloader ();

02. Tải mô hình

scene — Sử dụng biểu tượng ở trên cùng bên phải để phóng to hình ảnh

Để làm cho cảnh AR hoạt động, một mô hình sẽ được tải. Bạn sẽ thấy rằng sau khi tải nó được lưu trữ trong biến MODEL1. . Điều này sau đó được chia tỷ lệ và nhân bản hai lần trong ba bước. Thay vì tải ba mô hình khác nhau, tất cả các điều chỉnh đối với một mô hình sẽ được thực hiện trong mã để làm cho nó tải nhanh trên thiết bị di động.

 Loader.load ('phong cảnh1.dae', hàm (collada) {
  Model1 = Collada.Scene;
  model1.scale.x = model1.scale.y = model1.scale.z = 0,015;
  model2 = model1.clone ();
  model3 = model1.clone ();

03. Thiết lập tweening

Trên mô hình đầu tiên, đám mây sẽ được tìm thấy trong bối cảnh và điều này sẽ được Tweened đến một vị trí mới để đám mây mọc ra khỏi biển. Điều này được thiết lập để lặp lại mãi mãi và sẽ mất tám giây để Tween để hoạt hình lên và hiển thị hình thành đám mây.

 var cloud1 = model1.getobjectbyname ("đám mây", đúng);
  Cloud1 = Cloud1.Children ;
  tween.tween mới (cloud1.poseition) .to ({
  x: 0,
  Y: 30,
  Z: -15.
  }, 8000) .repeat (Infinity) .ave (tween.ing.quadratic.inout) .start ();

04. Quy mô nó lên

Đám mây được thu nhỏ xuống gần như vô hình. Một tween khác được thêm vào đám mây và quy mô này trên đám mây lên đến kích thước bình thường của nó. Với phong trào và tỷ lệ, nó sẽ tạo ra ảo ảnh rằng đám mây đang tăng lên và tạo thành ra khỏi biển là bước đầu tiên trong quá trình của chu trình nước.

 Cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0,0;
  tween.tween (cloud1.scale) .to ({
  x: 1,
  y: 1,
  Z: 1.
  }, 8000) .repeat (Infinity) .ave (tween.ing.quadratic.inout) .start ();

05. Thiết lập đám mây thứ hai

the water cycle scene — Một đám mây thứ hai sẽ ngồi trên núi

Đám mây tiếp theo từ mô hình thứ hai cần phải được định vị trong đó đám mây đầu tiên kết thúc hoạt hình của nó như một đám mây hình thành trên bầu trời. Điều này được đưa ra một phong trào tweened để định vị chính trên đất, tăng nhẹ trên núi. Điều này sẽ mất 12 giây để hoạt hình vì đó là một động thái lớn hơn.

 var cloud2 = model2.getObjectByName ("Cloud", TRUE);
  Cloud2 = Cloud2.Children ;
  Cloud2.poseition.set (0, 30, -15);
  tween.tween (cloud2.poseition) .to ({
  x: 0,
  Y: 50,
  Z: -145.
  }, 12000) .repeat (vô cực) .ave (tween.ing.quadratic.inout) .start ();

06. Làm cho trời mưa

Chìa khóa để làm cho công việc ảo ảnh này là cho phép đám mây mưa. Chu trình nước có mưa mây khi nó di chuyển cao hơn trên đất liền. Để có được hiệu ứng, một hệ thống hạt sẽ được sử dụng. Ở đây lượng hạt và vật liệu hạt được tạo ra, sử dụng hình ảnh thả mưa.

 var textureloader = mới ba.textureloader ();
particleCount = 1500;
các hạt = ba.Hegometry mới ();
var pmaterial = Mới ba.inchsm vật liệu ({
  Màu sắc: 0x3A4E5D,
  Kích thước: 0,05,
  Bản đồ: Textureloader.load ("img / rain.png"),
  phatest: 0,3,
  Độ mờ đục: 0,9,
  Trong suốt: TRUE});

07. Tạo hạt mưa

Sử dụng một vòng lặp cho vòng lặp, 1500 hạt mưa có thể được tạo bằng vị trí X, Y, Z ngẫu nhiên sẽ nằm giữa đám mây và mặt đất. Mỗi hạt mưa được cung cấp vận tốc ngẫu nhiên của riêng mình để làm cho mưa trông tự nhiên hơn. Các hạt được đẩy vào đỉnh ĐÚNG của hình học.

 cho (var i = 0; i & lt; particleCount; i ++) {
  var px = math.random () * 60 - 30,
  py = math.random () * -10,
  pz = math.random () * 20 - 10;
  var particle = mới ba.vector3 (px, py, pz);
  particle.velocity = mới ba.vector3 (0, - (math.random () * 0.9), 0);
  hạt.vertices.push (hạt); }

08. Làm việc trên hệ thống hạt

Bây giờ hệ thống hạt được tạo ra từ hình học và vật liệu. Các hạt được đặt để được sắp xếp để thứ tự z chính xác và sau đó các hạt mưa được tạo ra một đứa trẻ của đám mây thứ hai. Bất cứ nơi nào đám mây được tweened, mưa cũng xảy ra, vì vậy không cần phải làm động mưa sau đám mây!

 Hệ thống hạt = mới ba.point (hạt, pm vật liệu);
particleSystem.sortpartices = true;
Cloud2.add (hệ thống hạt);

09. Đặt vị trí mô hình cuối cùng

Trong mô hình cuối cùng, đám mây được định vị lại đến điểm kết thúc của chu trình hoạt hình đám mây thứ hai. Đám mây mới này sẽ chỉ ngồi trên bầu trời và không animate. Thay vào đó, dòng sông sẽ hoạt hình, vì vậy mô hình dòng sông được lưu trữ trong một biến, sẵn sàng để thêm tween vào nó.

 var Cloud3 = Model3.getObjectByName ("Cloud", TRUE);
  Cloud3 = Cloud3.Children ;
  Cloud3.ocites.set (0, 50, -145);
  var River = Model3.getObjectByName ("Sông", Đúng);
  River = River.Children ;

10. Đổ đầy sông

the water cycle model — Mực nước trong sông cần tăng

Trong bước thứ ba của chu trình nước, nước chảy ra khỏi những ngọn đồi, lấp đầy sông sông và hồ khi nó trở về biển. Đây là phong trào tinh tế nhất vì nó sẽ chỉ đòi hỏi phải di chuyển chiều cao của dòng sông để nó xuất hiện để lấp đầy. Tất cả mọi thứ được tải sẵn bây giờ, vì vậy trong đó Chức năng được gọi.

 TWEEN.Tween (River.poseition) .to ({
  Y: 3.
  }, 8000) .repeat (Infinity) .ing (tween.ing.quadratic.inout) .start ();
  trong đó();
});

Có tập tin thiết kế để tiết kiệm? Kiểm tra hướng dẫn của chúng tôi để lưu trữ đám mây .

Trang tiếp theo: Thêm chức năng AR và điểm đánh dấu

Trang hiện tại: Xây dựng ứng dụng AR: Các bước 01-10

Trang tiếp theo Xây dựng ứng dụng AR: Các bước 11-20

Cách xây dựng ứng dụng AR

01. Bắt đầu

02. Tải mô hình

03. Thiết lập tweening

04. Quy mô nó lên

05. Thiết lập đám mây thứ hai

06. Làm cho trời mưa

07. Tạo hạt mưa

08. Làm việc trên hệ thống hạt

09. Đặt vị trí mô hình cuối cùng

10. Đổ đầy sông

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

Cách vẽ đầu: Hướng dẫn đầy đủ

Cách chụp ảnh màn hình trên máy Mac

Cách sử dụng lò phản ứng lò xo vào các thành phần động

Làm việc thông minh với UI ZBrush của bạn

Trình thiết kế mối quan hệ: Cách sử dụng các ràng buộc

Cách vẽ một lâu đài với Sketchup

Tạo một etch kỹ thuật số một bản phác thảo

Bí mật để vẽ như Monet

Thể loại