title: how i rotate cube on button click in three.js?
body: <p>here is my code...cube is a perfect but i want rotate on button click.<br>
  eg..when i click front button then cube will be show front side same as other button<br>
  I did a lot of research but i did not find any solution<br>
  please anyone can help me..
  <a href="https://i.stack.imgur.com/6GW00.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6GW00.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene, camera, renderer, cube;
      
      init();
      //drag();
      
      function init() {
      
          // renderer
          var container = document.getElementById("container");
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.setClearColor ('#fff', 1);
          container.appendChild(renderer.domElement);
      
      
          // camera
          camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
       camera.position.x = 50;
       camera.position.y = 50;
       camera.position.z = 800;
      
          //cube
           var geometry = new THREE.BoxBufferGeometry(250, 350, 100,1,1,1);
        var cubeMaterial = new THREE.MeshLambertMaterial({color:"red"});
      
          cube = new THREE.Mesh(geometry, cubeMaterial);
          //cube.doubleSided = true;
      
          cube.rotation.x = Math.PI / 1.5;
          cube.rotation.y = Math.PI / 1;
          // scene
          scene = new THREE.Scene();
          scene.add(cube);
      
          // add subtle ambient lighting
          var ambientLight = new THREE.AmbientLight(0x888888);
          scene.add(ambientLight);
      
          // directional lighting
          var directionalLight = new THREE.DirectionalLight(0x666666);
          directionalLight.position.set(1, 1, 1).normalize();
          scene.add(directionalLight);
      
         
          function render() {
              renderer.render(scene, camera);
              //requestAnimFrame(render);
              requestAnimationFrame(render);
          }
      
          render();
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0px;
  }
  #container {
  width: 100%;
  height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/mrdoob/three.js/r86/build/three.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>