title: How to rotate the plane using three.js?
body: <p>Hey guys I am using <code>three.js</code> and have tried to rotate this plane below but to avail. Any idea how to do it please? Below is the code which renders the plane using <code>three.js</code>. How can I rotate it, please?. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var container;
  var camera, scene, renderer;
  var plane;
  
  var mouse, raycaster, isShiftDown = false;
  
  var cubeGeometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
  var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 0.5 } );
  
  var objects = [];
  
  init();
  render();
  
  function init() {
  
      container = document.createElement( 'div' );
      document.body.appendChild( container );
  
      var info = document.createElement( 'div' );
      info.style.position = 'absolute';
      info.style.top = '10px';
      info.style.width = '100%';
      info.style.textAlign = 'center';
      info.innerHTML = '&lt;a href="http://threejs.org" target="_blank" rel="noopener"&gt;three.js&lt;/a&gt; - voxel painter&lt;br&gt;&lt;strong&gt;click&lt;/strong&gt;: add voxel, &lt;strong&gt;shift + click&lt;/strong&gt;: remove voxel, &lt;a href="javascript:save()"&gt;save .png&lt;/a&gt;';
      container.appendChild( info );
  
      camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
      camera.position.set( 500, 800, 1300 );
      camera.lookAt( 0, 0, 0 );
  
      scene = new THREE.Scene();
      scene.background = new THREE.Color( 0xf0f0f0 );
  
      // Grid
  
      var gridHelper = new THREE.GridHelper( 1000, 20 );
      scene.add( gridHelper );
  
      //
  
      raycaster = new THREE.Raycaster();
      mouse = new THREE.Vector2();
  
      //PlaneBufferGeometry: platform to lay cubes
      var geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
      geometry.rotateX( - Math.PI / 2 );
  
      plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
      scene.add( plane );
  
      objects.push( plane );
  
      // Lights
  
      var ambientLight = new THREE.AmbientLight( 0x606060 );
      scene.add( ambientLight );
  
      var directionalLight = new THREE.DirectionalLight( 0xffffff );
      directionalLight.position.x = Math.random() - 0.5;
      directionalLight.position.y = Math.random() - 0.5;
      directionalLight.position.z = Math.random() - 0.5;
      directionalLight.position.normalize();
      scene.add( directionalLight );
  
      var directionalLight = new THREE.DirectionalLight( 0x808080 );
      directionalLight.position.x = Math.random() - 0.5;
      directionalLight.position.y = Math.random() - 0.5;
      directionalLight.position.z = Math.random() - 0.5;
      directionalLight.position.normalize();
      scene.add( directionalLight );
  
      renderer = new THREE.CanvasRenderer();
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      container.appendChild(renderer.domElement);
  
      document.addEventListener( 'mousedown', onDocumentMouseDown, false );
      //document.addEventListener( 'keydown', onDocumentKeyDown, false );
      //document.addEventListener( 'keyup', onDocumentKeyUp, false );
  
      //
  
      window.addEventListener( 'resize', onWindowResize, false );
  
  }
  
  function onWindowResize() {
  
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  
      renderer.setSize( window.innerWidth, window.innerHeight );
  
      render();
  
  }
  
  function onDocumentMouseDown( event ) {
  
      event.preventDefault();
  
      mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
  
      raycaster.setFromCamera( mouse, camera );
  
      var intersects = raycaster.intersectObjects( objects );
  
      if ( intersects.length &gt; 0 ) {
  
          var intersect = intersects[ 0 ];
  
          if ( isShiftDown ) {
  
              if ( intersect.object != plane ) {
  
                  scene.remove( intersect.object );
  
                  objects.splice( objects.indexOf( intersect.object ), 1 );
  
              }
  
          } else {
  
              var voxel = new THREE.Mesh( cubeGeometry, cubeMaterial );
              voxel.position.copy( intersect.point ).add( intersect.face.normal );
              voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
              scene.add( voxel );
  
              objects.push( voxel );
  
          }
  
          render();
  
      }
  
  }
  
  function render() {
  
      renderer.render( scene, camera );
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"&gt;&lt;/script&gt;
  &lt;script src="https://threejs.org/examples/js/renderers/Projector.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Look at the Plane here<br>
  <a href="https://i.stack.imgur.com/7kKe5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7kKe5.jpg" alt=""></a></p>