rotate on world axis

by jscastro76

HTML

<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  
  <canvas id="myCanvas"/>

CSS

body {
			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

var mesh, renderer, cylinder,
		  scene, r, g,
		  controls,
		  camera,
		  container = document.getElementById('myCanvas');

		//RENDERER
		renderer = new THREE.WebGLRenderer({
		  canvas: container,
		  antialias: true
		});
		//renderer.setClearColor(0x000000);
		renderer.setPixelRatio(window.devicePixelRatio); //device pixel ratio
		renderer.setSize(window.innerWidth, window.innerHeight); //canvas size

		init();
		animate();

		function init() {


		  scene = new THREE.Scene();
		  scene.background = new THREE.Color(0x999999);
		  var light = new THREE.AmbientLight(0xffffff, 1);

		  light.position.set(0.5, 1.0, 0.5).normalize();
		  scene.add(light);
		  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		  camera.position.fromArray([-20, 10, -140]);
		  scene.add(camera);

		  controls = new THREE.OrbitControls(camera, container);
		  let g = new THREE.Group();
		  scene.add(g);

		  //g.updateWorldMatrix(true);
		  var gridHelper = new THREE.GridHelper(400, 40, 0x0000ff, 0x808080);
		  gridHelper.position.y = 0;
		  gridHelper.position.x = 0;
		  scene.add(gridHelper);

		  scene.add(new THREE.AxesHelper(20))
      
		  cylinder = new THREE.Mesh(new THREE.CylinderBufferGeometry(10, 10, 10), new THREE.MeshStandardMaterial({
		    color: 0xFF0000
		  }))
		  cylinder.position.set(30, 0, 30)
      g.add(cylinder);
		  g.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2)
      
		}

		function animate() {
      r = 0.8;
      //cylinder.rotation.z += r;
      g.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), Math.PI * r / 180);
		  renderer.render(scene, camera);
		  requestAnimationFrame(animate);

		}