Grab and Rotate Sphere

How to rotate sphere properly

by MichaelJendryke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<html>

  <head>
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }

      canvas {
        width: 100%;
        height: 100%
      }

    </style>
    <meta charset="UTF-8">
  </head>
  <script type="text/javascript" src="OrbitControls.js"></script>

  <body>



    <div id="container">
    </div>


  </body>

</html>

JavaScript

var container, stats;

var camera, controls, scene, renderer;

init();

function init() {

  // SCENE
  scene = new THREE.Scene();
  var axesHelper = new THREE.AxesHelper(500);
  scene.add(axesHelper);

  // CAMERA
  camera = new THREE.PerspectiveCamera(35, window.innerWidth /         window.innerHeight);
  camera.near = 100;
  camera.far = 10000;
  camera.updateProjectionMatrix();
  scene.add(camera);



  // CONTROLS (Orbit)
  controls = new THREE.OrbitControls(camera);
  controls.addEventListener('change', render);
  controls.update();

  scene.add(cube());


  // RENDERER
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setClearColor(0xFFFFFF);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);


  // WEBSITE
  container = document.getElementById("container");
  container.appendChild(renderer.domElement);

  // WINDOW
  window.addEventListener('resize', onWindowResize, false);


};


render();

function render() {
  renderer.render(scene, camera);
}


function cube() {
  var cube_material = new THREE.MeshStandardMaterial({
    color: 0x111111,
    side: THREE.FrontSide
  });
  var cube_geometry = new THREE.CubeGeometry(50, 50, 50, 0, 0, 0);
  cube_mesh = new THREE.Mesh(cube_geometry, cube_material);
  return cube_mesh;
}