title: Three.js Folding Effect Image
body: <p>I am trying to create folding effect like folding a paper in half.</p>
  
  <p>I am using Three.js Library to help me manipulate the image.</p>
  
  <p>I have created 2 face paper using 2 PlaneGeometry and loaded on them texture with ImageUtils.loadTexture.</p>
  
  <p>I am curious if there is a way to split the image in half and then rotate one half on his edge so you create the folding effect.</p>
  
  <p>I guess this can be done since the create plane function <code>THREE.PlaneGeometry(width, height, widthSegments, heightSegments);</code> has widthSegments and heightSegments parameters.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My first Three.js app&lt;/title&gt;
      &lt;style&gt;
          body {
              background-color: #ffffff;
              margin: 0px;
              overflow: hidden;
          }
          container {
              background-color: #ffffff;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container" &gt;&lt;/div&gt;
      
      &lt;script src="three.min.js"&gt;&lt;/script&gt;
      &lt;script src="OrbitControls.js"&gt;&lt;/script&gt;
      &lt;script src="stats.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          
           
              
              var renderer, scene, camera, card;
              var container, stats;
  
              init();
              animate();
  
           
           
  
              function init() {
                
  
                  
                  container = document.getElementById('container');
                  // renderer
                  renderer = new THREE.WebGLRenderer();
                  renderer.setClearColor(0xffffff, 1.0);
              
                  renderer.setSize(window.innerWidth, window.innerHeight);
                  container.appendChild(renderer.domElement);
  
  
                  stats = new Stats();
                  stats.domElement.style.position = 'absolute';
                  stats.domElement.style.top = '0px';
                  container.appendChild(stats.domElement);
  
                  // scene
                  scene = new THREE.Scene();
  
                  // camera
                  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
                  camera.position.z = 300;
                  controls = new THREE.OrbitControls(camera, container);
                  camera.lookAt(scene.position);
  
                  // geometry
                  var geometry1 = new THREE.PlaneGeometry(90, 110, 3, 1);
                  var geometry2 = new THREE.PlaneGeometry(90, 110, 3, 1);
                  geometry2.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI));
  
                  // textures
                  var textureFront = new THREE.ImageUtils.loadTexture('Flyer2pag1.png'); // Flyer has image sorce in project folder  
                  var textureBack = new THREE.ImageUtils.loadTexture('Flyer2pag2.png');
  
                  // material
                  var material1 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: textureFront });
                  var material2 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: textureBack });
                   
  
                  // card
                  card = new THREE.Object3D();
                  scene.add(card);
  
                  // mesh
                  var mesh1 = new THREE.Mesh(geometry1, material1);
                  card.add(mesh1);
                  var mesh2 = new THREE.Mesh(geometry2, material2);
                  card.add(mesh2);
  
              }
        
              function animate() {
  
                  requestAnimationFrame(animate);
  
                  //card.rotation.y += 0.01;
                  stats.update();
                  renderer.render(scene, camera);
  
              }
        
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>