Three.js Sử dụng kết cấu 2D \ sprite cho hoạt ảnh (planeGeometry)

Question

Tôi khá mới trong html5 và three.js. Tôi đã thử nghiệm một chút với nó, và về cơ bản những gì tôi muốn làm là để có một Mesh (Tôi đang sử dụng planeGeometry, như hướng dẫn tôi theo sau sử dụng nó). Lưới hiển thị các họa tiết khác nhau, có thể thay đổi sau này.

Đây là những gì mã của tôi trông giống như:

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png"); 
angelTexture.offset.x = -0.75; 
angelTexture.offset.y = -0.75; 

angelMesh = new THREE.Mesh(new THREE.PlaneGeometry(79, 53, 79, 53), new THREE.MeshBasicMaterial({ map: angelTexture, wireframe: false })); 

angelMesh.position.x = 0; 
angelMesh.position.y = 0; 
scene.add(angelMesh); 

Vấn đề là bất cứ khi nào tôi bù đắp, Mesh dường như đủ lớn để hiển thị tất cả các Sprites khác (Tôi đang sử dụng kết cấu như một 2D Sprite mà tôi bù đắp để animate nó). Kết quả là khá tai hại và tôi vẫn đang tìm cách kiểm soát mức độ lớn của Mesh để nó chỉ hiển thị một ảnh chụp nhanh của Sprite. Tất cả các nỗ lực của tôi dường như chỉ thay đổi kích thước của Mesh cũng như Texture cơ bản và vẫn hiển thị tất cả các Sprites.

Ai đó có thể chỉ cho tôi đúng hướng không? Cảm ơn trước.

...

Bạn tôi đã đưa ra một giải pháp ... tôi bị mất tài sản lặp lại.

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png"); 
angelTexture.offset.x = -0.75; 
angelTexture.offset.y = -0.75; 

angelTexture.repeat.x = 0.25; 
angelTexture.repeat.y = 0.25; 
scene.add(angelMesh); 

Hy vọng điều này sẽ giúp những người khác gặp vấn đề tương tự.

Answer 1

Tôi đã có cùng một câu hỏi trong một thời gian trước và vì vậy tôi đã viết một ví dụ hoàn chỉnh về hoạt ảnh bằng cách sử dụng spritesheet làm kết cấu cho PlaneGeometry, và sau đó cập nhật kết cấu theo khoảng thời gian đều đặn - xem ví dụ tại

http://stemkoski.github.io/Three.js/Texture-Animation.html

và xem mã nguồn nhận xét để được giải thích thêm.