Wrap different images on different faces of a cube


cubeWe can render different geometry in 3D using three.js.
Here I will explain how we can wrap different image on different faces of a Cube using three.js(revision 68).

Step:1
Here we will Create the cube and wrap a single image on all faces.

 

// Creating the Cube
 var geometry = new THREE.BoxGeometry(2.5,2,2);
 // Adding the image as material to wrap
 var material = new THREE.MeshBasicMaterial( {
 map: THREE.ImageUtils.loadTexture( 'media/image.gif' ) } );
 // Finally Creating the Cube Mesh, wrapping image on its surface
 var cube = new THREE.Mesh(geometry, material);

Step:2
Now lets see how we can modify the code to wrap different images on different faces.

// Creating the Cube
 var geometry = new THREE.BoxGeometry(2.5,2,2);
//Add images to the material array to wrap different image on different faces
 var materialArray = [];
 materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageOne.jpg' ) }));
 materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageTwo.jpg' ) }));
 materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageThree.jpg' ) }));
 materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageFour.jpg' ) }));
 materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageFive.jpg' ) }));
 materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageSix.jpg' ) }));
 var material = new THREE.MeshFaceMaterial(materialArray);
// Finally Creating the Cube Mesh, wrapping image on its surface
 var cube = new THREE.Mesh(geometry, material);

Step:3
Here we will write the complete code to add the Cube to the Scene.

<html>
    <head>
        <title>Image wrap on Cube</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>
        <!--Adding the three.js library-->
        <script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
           
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
           
            // Creating the Cube, we can change the parameters passed to modify the size of cube :)
            var geometry = new THREE.BoxGeometry(2.5,2,2);
            
            // Add six images to the material array to wrap different image on different faces     
            var materialArray = [];
            materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageOne.jpg' ) }));
            materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageTwo.jpg' ) }));
            materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageThree.jpg' ) }));
            materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageFour.jpg' ) }));
            materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageFive.jpg' ) }));
            materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'media/imageSix.jpg' ) }));
            var material = new THREE.MeshFaceMaterial(materialArray);
            
            // Finally Creating the Cube Mesh, wrapping images on its surface
            var cube = new THREE.Mesh(geometry, material);
            // Adding the cube to scene
            scene.add(cube);
           
            camera.position.z = 5;
           
            var render = function () {
                //Adding rotation to the cube
                requestAnimationFrame(render);
                cube.rotation.x += 0.02;
                cube.rotation.y += 0.02;
                renderer.render(scene, camera);
            };
           
            render();
        </script>
    </body>
</html>

 

Now you can browse it and see a Rotating cube with Images wrapped on its faces 🙂

Reference : http://threejs.org/

Advertisements