Làm thế nào để sử dụng nhiều tài liệu trong một khối ba.js?

Question

Tôi đang cố gắng sử dụng Three.js để hiển thị hình lập phương có 6 hình ảnh khác nhau trên khuôn mặt.

Các constructor của THREE.CubeGeometry trông như thế này:

THREE.CubeGeometry = function (width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides) 

tôi có thể nhìn thấy từ mã mà "vật liệu" được kỳ vọng sẽ là một trong hai loại vật liệu, hoặc một mảng của 6 vật liệu khác nhau, nhưng vật liệu thông qua ở đây dường như không bao giờ được sử dụng khi dựng hình.

Thay vào đó, tài liệu đơn lẻ được cung cấp cho kiến ​​trúc Mesh được sử dụng cho tất cả 6 khuôn mặt.

var face_materials = ... <load 6 textures here>... 
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored? 
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead 

Thậm chí nếu tôi bỏ qua hoặc không xác định là "some_material", có vẻ như ghi đè lên face_materials và không hiển thị gì cả.

Có cách nào để thực hiện công việc này bằng CubeGeometry không? Hay tôi phải tạo riêng 6 khuôn mặt và thêm chúng vào cảnh?

Answer 1

Bạn cần sử dụng BA.MeshFaceMaterial cho lưới. Dưới đây là mã ví dụ:

var materials = []; 
for (var i=0; i<6; i++) { 
    var img = new Image(); 
    img.src = i + '.png'; 
    var tex = new THREE.Texture(img); 
    img.tex = tex; 
    img.onload = function() { 
    this.tex.needsUpdate = true; 
    }; 
    var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex}); 
    materials.push(mat); 
} 
var cubeGeo = new THREE.CubeGeometry(400,400,400,1,1,1, materials); 
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial()); 

Answer 2

Đối với một ví dụ về cách sử dụng nhiều vật liệu trong một khối lập phương, cho một phiên bản gần đây của three.js phiên bản 56 (tháng 3 năm 2013), hãy kiểm tra mã nguồn của ví dụ tại http://stemkoski.github.com/Three.js/Textures.html - các thay đổi lớn nhất gần đây là THREE.MeshFaceMaterial cần được chuyển qua một mảng tài liệu được sử dụng trong CubeGeometry.