[WebGL] Texture Canvas

이번 예제는 Texture Canvas에 관한 것입니다. Canvas는 HTML5의 Canvas 엘리먼트를 의미하며, Canvas에 texture를 맵핑하는 기법입니다.

Download Project

05-05-texture-canvas.zip

 

Click here to view with full screen mode

Operations

Mouse Left Button Click & Drag: Camera Rotating

Mouse Wheel: Camera Zoom In & Out

Mouse Right Button Click & Drag: Camera Panning

main.js

// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
 
// custom global variables
var canvas = [];
var context = [];
var texture = [];
var imageObj = [];
var material = [];
var mesh = [];
 
init();
animate();
 
// FUNCTIONS
function init()
{
    // SCENE
    scene = new THREE.Scene();
 
    // CAMERA
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0,150,400);
    camera.lookAt(scene.position);
 
    // RENDERER
    if ( Detector.webgl )
        renderer = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );
 
    // EVENTS
    THREEx.WindowResize(renderer, camera);
    THREEx.FullScreen.bindKey({ charCode : 'f'.charCodeAt(0) });
 
    // CONTROLS
    controls = new THREE.OrbitControls( camera, renderer.domElement );
 
    // STATS
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );
 
    // LIGHT
 
    // FLOOR
 
 
    // SKYBOX/FOG
    var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
    var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.BackSide } );
    var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
    scene.add(skyBox);
    
    ////////////
    // CUSTOM //
    ////////////
    /////// draw text on canvas /////////
 
    // create a canvas element
    var canvas1 = document.createElement('canvas');
    var context1 = canvas1.getContext('2d');
    context1.font = "Bold 40px Arial";
    context1.fillStyle = "rgba( 123, 244, 15, 0.8)";
    context1.fillText('WebGL', 0, 30);
    
    // canvas contents will be used for a texture
    var texture1 = new THREE.Texture(canvas1);
    texture1.needsUpdate = true;
      
    var material1 = new THREE.MeshBasicMaterial( {map: texture1, side:THREE.DoubleSide } );
    material1.transparent = true;
 
    var mesh1 = new THREE.Mesh(
        new THREE.PlaneGeometry(canvas1.width, canvas1.height),
        material1
      );
    mesh1.position.set(0,50,0);
    scene.add( mesh1 );
 
    // create a canvas element
    var canvas2 = document.createElement('canvas');
    var context2 = canvas1.getContext('2d');
    context2.font = "Bold 50px Arial";
    context2.fillStyle = "rgba( 16, 86, 244, 0.9)";
    context2.fillText('Hello World', 0, 90);
    
    // canvas contents will be used for a texture
    var texture2 = new THREE.Texture(canvas2);
    texture2.needsUpdate = true;
      
    var material2 = new THREE.MeshBasicMaterial( {map: texture2, side:THREE.DoubleSide } );
    material2.transparent = true;
 
    var mesh2 = new THREE.Mesh(
        new THREE.PlaneGeometry(canvas2.width, canvas2.height),
        material2
      );
    mesh2.position.set(0,20,0);
    scene.add( mesh2 );
    
    /////// draw image on canvas 0 /////////
    // create a canvas element
    canvas[0] = document.createElement('canvas');
    context[0] = canvas[0].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[0] = new THREE.Texture(canvas[0]);
 
    // load an image
    imageObj[0] = new Image();
    imageObj[0].src = "img/0.png";
 
    // after the image is loaded, this function executes
    imageObj[0].onload = function()
    {  
        context[0].drawImage(imageObj[0], 0, 0);
        if ( texture[0] ) // checks if texture exists
            texture[0].needsUpdate = true;
    };
 
    material[0] = new THREE.MeshBasicMaterial( {map: texture[0], side:THREE.DoubleSide} );
    material[0].transparent = true;
 
    mesh[0] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[0].width, canvas[0].height),
        material[0]
      );
    mesh[0].position.set(-300,50,-50);
    scene.add( mesh[0] );
 
    /////// draw image on canvas 1 /////////
    // create a canvas element
    canvas[1] = document.createElement('canvas');
    context[1] = canvas[1].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[1] = new THREE.Texture(canvas[1]);
 
    // load an image
    imageObj[1] = new Image();
    imageObj[1].src = "img/1.png";
 
    // after the image is loaded, this function executes
    imageObj[1].onload = function()
    {  
        context[1].drawImage(imageObj[1], 0, 0);
        if ( texture[1] ) // checks if texture exists
            texture[1].needsUpdate = true;
    };
 
    material[1] = new THREE.MeshBasicMaterial( {map: texture[1], side:THREE.DoubleSide} );
    material[1].transparent = true;
 
    mesh[1] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[1].width, canvas[1].height),
        material[1]
      );
    mesh[1].position.set(-100,50,-50);
    scene.add( mesh[1] );
 
    /////// draw image on canvas 2 /////////
    // create a canvas element
    canvas[2] = document.createElement('canvas');
    context[2] = canvas[2].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[2] = new THREE.Texture(canvas[2]);
 
    // load an image
    imageObj[2] = new Image();
    imageObj[2].src = "img/2.png";
 
    // after the image is loaded, this function executes
    imageObj[2].onload = function()
    {  
        context[2].drawImage(imageObj[2], 0, 0);
        if ( texture[2] ) // checks if texture exists
            texture[2].needsUpdate = true;
    };
 
    material[2] = new THREE.MeshBasicMaterial( {map: texture[2], side:THREE.DoubleSide} );
    material[2].transparent = true;
 
    mesh[2] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[2].width, canvas[2].height),
        material[2]
      );
    mesh[2].position.set(100,50,-50);
    scene.add( mesh[2] );
 
    /////// draw image on canvas 3 /////////
    // create a canvas element
    canvas[3] = document.createElement('canvas');
    context[3] = canvas[3].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[3] = new THREE.Texture(canvas[3]);
 
    // load an image
    imageObj[3] = new Image();
    imageObj[3].src = "img/3.png";
 
    // after the image is loaded, this function executes
    imageObj[3].onload = function()
    {  
        context[3].drawImage(imageObj[3], 0, 0);
        if ( texture[3] ) // checks if texture exists
            texture[3].needsUpdate = true;
    };
 
    material[3] = new THREE.MeshBasicMaterial( {map: texture[3], side:THREE.DoubleSide} );
    material[3].transparent = true;
 
    mesh[3] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[3].width, canvas[3].height),
        material[3]
      );
    mesh[3].position.set(300,50,-50);
    scene.add( mesh[3] );
 
    /////// draw image on canvas 4 /////////
    // create a canvas element
    canvas[4] = document.createElement('canvas');
    context[4] = canvas[4].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[4] = new THREE.Texture(canvas[4]);
 
    // load an image
    imageObj[4] = new Image();
    imageObj[4].src = "img/4.png";
 
    // after the image is loaded, this function executes
    imageObj[4].onload = function()
    {  
        context[4].drawImage(imageObj[4], 0, 0);
        if ( texture[4] ) // checks if texture exists
            texture[4].needsUpdate = true;
    };
 
    material[4] = new THREE.MeshBasicMaterial( {map: texture[4], side:THREE.DoubleSide} );
    material[4].transparent = true;
 
    mesh[4] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[4].width, canvas[4].height),
        material[4]
      );
    mesh[4].position.set(500,50,-50);
    scene.add( mesh[4] );
 
    /////// draw image on canvas 5 /////////
    // create a canvas element
    canvas[5] = document.createElement('canvas');
    context[5] = canvas[5].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[5] = new THREE.Texture(canvas[5]);
 
    // load an image
    imageObj[5] = new Image();
    imageObj[5].src = "img/5.png";
 
    // after the image is loaded, this function executes
    imageObj[5].onload = function()
    {  
        context[5].drawImage(imageObj[5], 0, 0);
        if ( texture[5] ) // checks if texture exists
            texture[5].needsUpdate = true;
    };
 
    material[5] = new THREE.MeshBasicMaterial( {map: texture[5], side:THREE.DoubleSide} );
    material[5].transparent = true;
 
    mesh[5] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[5].width, canvas[5].height),
        material[5]
      );
    mesh[5].position.set(-300,250,-50);
    scene.add( mesh[5] );
 
    /////// draw image on canvas 6 /////////
    // create a canvas element
    canvas[6] = document.createElement('canvas');
    context[6] = canvas[6].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[6] = new THREE.Texture(canvas[6]);
 
    // load an image
    imageObj[6] = new Image();
    imageObj[6].src = "img/6.png";
 
    // after the image is loaded, this function executes
    imageObj[6].onload = function()
    {  
        context[6].drawImage(imageObj[6], 0, 0);
        if ( texture[6] ) // checks if texture exists
            texture[6].needsUpdate = true;
    };
 
    material[6] = new THREE.MeshBasicMaterial( {map: texture[6], side:THREE.DoubleSide} );
    material[6].transparent = true;
 
    mesh[6] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[6].width, canvas[6].height),
        material[6]
      );
    mesh[6].position.set(-100,250,-60);
    scene.add( mesh[6] );
 
    /////// draw image on canvas 7 /////////
    // create a canvas element
    canvas[7] = document.createElement('canvas');
    context[7] = canvas[7].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[7] = new THREE.Texture(canvas[7]);
 
    // load an image
    imageObj[7] = new Image();
    imageObj[7].src = "img/7.png";
 
    // after the image is loaded, this function executes
    imageObj[7].onload = function()
    {  
        context[7].drawImage(imageObj[7], 0, 0);
        if ( texture[7] ) // checks if texture exists
            texture[7].needsUpdate = true;
    };
 
    material[7] = new THREE.MeshBasicMaterial( {map: texture[7], side:THREE.DoubleSide} );
    material[7].transparent = true;
 
    mesh[7] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[7].width, canvas[7].height),
        material[7]
      );
    mesh[7].position.set(300,250,-60);
    scene.add( mesh[7] );
 
    /////// draw image on canvas 8 /////////
    // create a canvas element
    canvas[8] = document.createElement('canvas');
    context[8] = canvas[8].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[8] = new THREE.Texture(canvas[8]);
 
    // load an image
    imageObj[8] = new Image();
    imageObj[8].src = "img/8.png";
 
    // after the image is loaded, this function executes
    imageObj[8].onload = function()
    {  
        context[8].drawImage(imageObj[8], 0, 0);
        if ( texture[8] ) // checks if texture exists
            texture[8].needsUpdate = true;
    };
 
    material[8] = new THREE.MeshBasicMaterial( {map: texture[8], side:THREE.DoubleSide} );
    material[8].transparent = true;
 
    mesh[8] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[8].width, canvas[8].height),
        material[8]
      );
    mesh[8].position.set(100,250,-60);
    scene.add( mesh[8] );
 
    /////// draw image on canvas 9 /////////
    // create a canvas element
    canvas[9] = document.createElement('canvas');
    context[9] = canvas[9].getContext('2d');
 
    // canvas contents will be used for a texture
    texture[9] = new THREE.Texture(canvas[9]);
 
    // load an image
    imageObj[9] = new Image();
    imageObj[9].src = "img/9.png";
 
    // after the image is loaded, this function executes
    imageObj[9].onload = function()
    {  
        context[9].drawImage(imageObj[9], 0, 0);
        if ( texture[9] ) // checks if texture exists
            texture[9].needsUpdate = true;
    };
 
    material[9] = new THREE.MeshBasicMaterial( {map: texture[9], side:THREE.DoubleSide} );
    material[9].transparent = true;
 
    mesh[9] = new THREE.Mesh(
    new THREE.PlaneGeometry(canvas[9].width, canvas[9].height),
        material[9]
      );
    mesh[9].position.set(500,250,-60);
    scene.add( mesh[9] );
}
 
function animate() 
{
    requestAnimationFrame( animate );
    render();        
    update();
}
 
function update()
{
    controls.update();
    stats.update();
}
 
function render() 
{
    renderer.render( scene, camera );
}