Hiển thị màu nền thông qua PNG trong suốt trên tài liệu?

Question

Tôi đang tạo trình tạo chữ hoa bằng cách sử dụng THREE.js, những điều cơ bản là tôi muốn có thể thay đổi height/width/length của một hộp, xoay quanh và cũng thay đổi màu nền của hộp.

này là nó cho đến nay: http://design365hosting.co.uk/casebuilder3D/

Kích thước thay đổi công việc, cũng như việc kéo hộp, bây giờ tôi đang làm việc với sự thay đổi màu nền.

Cách tôi muốn điều này hoạt động là sử dụng PNG trong suốt làm khuôn mặt của hộp và đặt màu nền sao cho màu nền này hiển thị qua PNG trong suốt.

Đây là cách tôi đang làm việc đó:

var texture = THREE.ImageUtils.loadTexture("images/crate.png"); 
materials.push(new THREE.MeshBasicMaterial({color:0xFF0000, map: texture})); 

như bạn có thể thấy tôi thiết lập các nguyên liệu để có một màu nền của màu đỏ và che phủ các PNG trong suốt, vấn đề là, dường như three.js bỏ qua màu nền và chỉ hiển thị PNG trong suốt, nghĩa là không có màu nào hiển thị qua.

Kết quả mong đợi phải là hộp màu đỏ có PNG phủ lên.

Hy vọng điều đó có ý nghĩa, bất kỳ ai cũng có thể trợ giúp không?

Answer 1

Three.js MeshBasicMaterial không hỗ trợ những gì bạn đang cố gắng làm. Trong MeshBasicMaterial, nếu PNG là một phần trong suốt, thì tài liệu sẽ được minh bạch một phần.

Những gì bạn muốn, là tài liệu vẫn giữ nguyên là mờ đục và màu vật liệu để hiển thị.

Bạn có thể thực hiện việc này với tùy chỉnh ShaderMaterial. Trong thực tế, nó là khá dễ dàng. Đây là shader đoạn:

uniform vec3 color; 
uniform sampler2D texture; 

varying vec2 vUv; 

void main() { 

    vec4 tColor = texture2D(texture, vUv); 

    gl_FragColor = vec4(mix(color, tColor.rgb, tColor.a), 1.0); 

} 

Và đây là một Fiddle: http://jsfiddle.net/g5btunz9/

Trong fiddle, kết cấu là một vòng tròn trên nền trong suốt. Bạn có thể thấy màu đỏ của vật liệu hiển thị qua.

three.js r.72