three.js ~ example ~ Mr.doob

2012-01-05 ~

by nicolasrannou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>

JavaScript

var camera, scene, renderer, geometry, material, mesh, uniforms, texture;

init();
animate();

function init() {
    
    fragShader = 'uniform sampler2D texture1;\nvarying vec2 vuv;\nvoid main() { gl_FragColor = texture2D(texture1, vuv); }';
    
    vertShader = 'varying vec2 vuv;\nvoid main() { vuv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }';

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 2;
    scene.add(camera);
    
    // Should be passing value of 127, not a scaled 0.0 -> 1.0, right?
    var array = new Uint8Array([240]),
        texture = new THREE.DataTexture(array, 1, 1, THREE.LuminanceFormat, THREE.UnsignedByteType);
    
    texture.needsUpdate = true;
    
    uniforms = {
        texture1: {type: 't', value: texture}
    }; 

    geometry = new THREE.PlaneGeometry(1, 1);
    material = new THREE.ShaderMaterial({
        vertexShader: vertShader,
        fragmentShader: fragShader,
        uniforms: uniforms
    });
    
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({alpha: true});
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}