Texture as Mask THREEJS
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script id="vertex_shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
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 );
}
</script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Custom Shader: Material Color "Shows Through" Transparent Texture
// three.js r.69
var mesh, renderer, scene, camera;
init();
animate();
function init() {
// info
info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#fff';
info.style.fontWeight = 'bold';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1'; // renderer domElement covers it up
info.style.fontFamily = 'Monospace';
info.innerHTML = ' Custom Shader: Material Color "Shows Through" Transparent Texture';
document.body.appendChild( info );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
1,
10000
);
camera.position.set( 200, 0, 200 );
camera.lookAt( scene.position );
scene.add( camera );
// cube geometry
var geometry = new THREE.BoxGeometry( 70, 70, 70 );
// texture
var texture = new THREE.Texture( generateTexture( ) ); // texture background is transparent
texture.needsUpdate = true; // important
var texture = THREE.ImageUtils.loadTexture("snowflake7_alpha.png");
// uniforms
var uniforms = {
color: { type: "c", value: new THREE.Color( 0xff0000 ) }, // material is "red"
texture: { type: "t", value: texture },
};
// attributes
var attributes = {
};
// material
var material = new THREE.ShaderMaterial({
attributes : attributes,
uniforms : uniforms,
vertexShader : document.getElementById( 'vertex_shader' ).textContent,
fragmentShader : document.getElementById(...