iOS: HTML5 với phát triển Three.js

Question

Tôi đang lên kế hoạch phát triển HTML5 với các trang Three.js, để tôi có thể đạt được màn hình 3D bằng cách sử dụng và hỗ trợ nền tảng Di động dễ dàng trong phương pháp Nền tảng chéo. Tôi đọc Three.js sử dụng WebGL, nhưng các trình duyệt iOS và Android không hỗ trợ nó, vì vậy tôi không thể phát triển các ứng dụng kết hợp đó.

Có thể ai đó vui lòng tư vấn cho dù tôi có thể phát triển HTML5 với các trang Three.js để đạt được tương tác 3D trên các ứng dụng iOS và Android hay không dưới dạng ứng dụng web? Nếu không, xin vui lòng cho tôi các liên kết chính thức nơi nó được đề cập rằng nó không được hỗ trợ.

Cảm ơn bạn.

Answer 1

Three.js sẽ hoạt động tốt mà không có WebGL. Bạn có thể sử dụng trình kết xuất Canvas - nó được mô tả trong tài liệu Three.js, tôi chắc chắn bạn có thể tìm thấy nó trên github bằng cách sử dụng google hoặc thậm chí Bing. Nó không nhanh bằng cách sử dụng WebGL, nhưng một người không đua Monte Carlo trong một chiếc Nissan Sentra.

Bạn không nên mong đợi hiệu suất 3D cao trên bất kỳ nền tảng di động nào - chủ yếu là do hiệu suất javascript có thể chậm chạp. Hãy thử truy cập một số ví dụ Three.js khác nhau bằng cách sử dụng thiết bị di động (cả có và không có webgl) để có được một số ý tưởng về hiệu suất.

Answer 2

Tôi đã cố gắng chạy bản trình diễn Canvas Three.js trên iPad Air của mình và điều đó thật khủng khiếp. Thông thường, sự cố Safari và thậm chí nếu hiển thị, nó hoạt động 2-3 khung hình/giây. Vì vậy, có vẻ như nó rất thô trên thiết bị iOS ngay bây giờ

Answer 3

"nhưng các trình duyệt iOS và Android không hỗ trợ" Tôi có thể sử dụng Three.js và trình diễn webgl trên trình duyệt Android cổ phiếu bắt đầu từ phiên bản 2.3.7. lên đến 4.3+. Đối số của bạn không hợp lệ: P

Answer 4

Hỗ trợ trình duyệt iOS và Android webgl cũng như trình duyệt Web, đôi khi bạn có thể giảm hiệu ứng hiển thị để hoạt động. Điều này thường làm. Đối với ứng dụng, khả năng hiển thị webview android thấp. Ios có một cái tốt hơn.

Và bạn có thể thêm một số công cụ hiển thị vào ứng dụng của mình, chẳng hạn như XWalkView, Dưới đây là post của tôi cách sử dụng nó để hiển thị mô hình 3D với ba.js trong ứng dụng android4.2.0 của tôi. Đối với IOS cũng có các giải pháp phù hợp.

Answer 5

iOS Safari và Android Chrome đã hỗ trợ WebGL trong nhiều năm nay.

Sự cố bạn có thể nhắc đến là WebView của Android hoặc UIWebView của iOS (điều khiển bạn có thể đặt trong ứng dụng gốc để hiển thị trang web) có thể có hoặc không hỗ trợ WebGL. WebGL is supported in WebViews as of Android 5.0 apparently mặc dù mọi người có run into issues

Tùy chọn khác là sử dụng một cái gì đó như CocoonJS. Họ dường như cung cấp custom webview implementations cho Android 4.0+ và iOS 8+.

Đối với hiệu suất, ba.js sẽ hoạt động tốt trên các cảnh đơn giản với thiết bị di động. Có rất nhiều ví dụ. 3D trên thiết bị di động nói chung mặc dù yêu cầu nội dung được tối ưu hóa (mô hình đa giác thấp hơn, họa tiết nhỏ hơn, bóng đổ đơn giản hơn, ít ánh sáng hơn, vv ...) liên quan đến máy tính để bàn và đặc biệt với ba.js

Answer 6

Câu trả lời được chọn cho câu hỏi này đề xuất sử dụng Three.js CanvasRenderer, nhưng như here trong tài liệu Three.js, CanvasRenderer đã được chấp nhận:

LƯU Ý: các renderer Canvas đã bị phản đối và không còn là một phần của lõi Three.js .

Điều quan trọng cần lưu ý là nó vẫn có thể được sử dụng cho những cảnh 3d đơn giản và có thể được tìm thấy trên Github here

WebGL được hỗ trợ trong Androids WebView V36 trở lên, như đã thấy here. Ngoài ra với cũ Android Chrome trình duyệt WebGL có thể được kích hoạt bằng cách gõ: chrome://flags vào trình duyệt và chọn Enable liên kết xuất hiện dưới Enable WebGL tiêu đề trong cửa sổ trình duyệt, hoặc bằng cách cập nhật webview từ Android Google Play Store.

WebGL đã được hỗ trợ trên Mobile Safari từ iOS 8.0b.

Tại mobilehtml5.org bạn có thể xem những gì các phiên bản thiết bị di động hỗ trợ các tính năng HTML5 cụ thể:

Sony Xperia Android 2.3 cũng hỗ trợ WebGL.