Làm cách nào để đảm bảo Three.js được tải trước các tệp khác trong Meteor?

Question

Tôi đang sử dụng Meteor 0.6.3 với thiên thạch. Tôi đang cố gắng phát triển trò chơi bằng Three.js sử dụng Meteor cho nhiều người chơi. Toàn bộ mã số here. Tôi đã thử bằng cách sử dụng gói Atmosphere here, nhưng tôi nhận được:

ReferenceError: THREE is not defined

workaround của tôi đã được bao gồm Three.js trong tiêu đề của tập tin mẫu của tôi. Điều này làm việc khi tôi không gọi hàm Three.js cho đến khi khởi động máy khách. Tôi gặp vấn đề khi tôi cố gắng sử dụng một nguyên mẫu để xác định lớp đồng minh của tôi. Tôi đã có mã như:

var Enemy = function() { 
this.mesh = new THREE.Mesh(); 
}; 

var Enemy = function(){}; 
Enemy.prototype = new Entity(); 

này đưa ra một lỗi mà BA không được định nghĩa, mặc dù đang hoạt động tốt nếu viết như sau:

var Entity = function() { 
this.mesh = new THREE.Mesh(); 
}; 

var Enemy = function() { 
this.mesh = new THREE.Mesh(); 
}; 

Tôi muốn để có thể sử dụng mẫu như thế này để quản lý một số loại thực thể sẽ có cùng giao diện cơ bản. Dưới đây là một số những điều tôi cũng đã cố gắng:

1. Dựa trên the documentation, tôi đã cố gắng đặt một three.min.js trong dự án/dự án/khách hàng/dự án/khách hàng/tương thích/dự án/lib/. Mỗi lần nó nói BA không được xác định hoặc Meteor bị treo.

2. Xác định các nguyên mẫu này trong tệp html nơi chúng tôi gọi Three.js.

Để làm rõ câu hỏi của mình, tôi tự hỏi liệu có ai có thể đề xuất cách cấu trúc tệp của mình sao cho nó sẽ tải Three.js hay không, sau đó tất cả các tệp của tôi sẽ khởi tạo ứng dụng khách trong Meteor.startup (). Đây là cấu trúc tệp hiện tại:

project/model.js 
project/server/server.js 
project/client/game.css 
project/client/game.html 
project/client/game.js 

Vui lòng cho tôi biết nếu tôi có thêm thông tin nào. Tôi hy vọng tôi không giết bất kỳ từ khóa nào quá tệ!

Answer 1

Trong Meteor, các tập lệnh được đặt trong thư mục tải /lib trước mọi thứ khác. Tôi khuyên bạn nên lấy phiên bản mới nhất của Three.js từ https://github.com/mrdoob/three.js/zipball/master và thả phiên bản đó vào đó.

Answer 2

Chỉnh sửa: Trong các phiên bản mới hơn của Meteor, bạn có thể đặt ba.js vào ứng dụng/khả năng tương thích. Xem câu trả lời của þă דᴚ ῖↄқ.

---

Three.js không tự gắn với đối tượng cửa sổ chung. Thay vào đó, nó chỉ định nghĩa một var BA.

Meteor, mặt khác, tạo phạm vi cho mỗi tệp được tải, vì vậy mọi var được định nghĩa trong tập lệnh này không phải là toàn cục. Đó là lý do tại sao BA không hiển thị trên toàn cầu.

Thêm window.THREE = THREE; vào cuối tệp nguồn ba.js giải quyết vấn đề này.

Answer 3

Không đặt THREE.js vào lib. Đặt nó vào client/compatibility.

Từ các tài liệu:

Some JavaScript libraries only work when placed in the client/compatibility subdirectory. Files in this directory are executed without being wrapped in a new variable scope. This means that each top-level var defines a global variable. In addition, these files are executed before other client-side JavaScript files.

Vấn đề của bạn, như đã nêu trong câu trả lời khác, đó là việc xác định một biến với var tạo ra một biến cục bộ phạm vi của mô-đun và không phải là toàn bộ dự án. Tôi không cần phải bao gồm window.THREE = THREE;

Answer 4

Cuối cùng, trong Meteor 1.3 trở lên, các mô-đun NPM được hỗ trợ out-of-the-box. Thêm Three.js là đơn giản như chạy

npm install three 

trong thư mục gốc của ứng dụng Meteor của bạn, sau đó trong mã của bạn, trong bất kỳ tập tin, chỉ cần đặt này ở đầu trang:

import THREE from 'three' 

và đó là nó !

Meteor 1.3 là trong phiên bản beta vẫn còn, như vậy để thử nó ra bạn cần phải chạy

meteor update --release METEOR@1.3-beta.12 

trong ứng dụng của bạn.