Rotation order

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
camera.lookAt(0, 0, 1);
var renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var geom = new THREE.CylinderBufferGeometry(1, 1, 0.5, 16);
geom.rotateZ(-Math.PI * 0.5);
var mat = new THREE.MeshBasicMaterial({color: "red", wireframe: true});
var mesh = new THREE.Mesh(geom, mat);
mesh.rotation.order = "YXZ";
scene.add(mesh);

var meshBlack = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({color: "black"}));
meshBlack.scale.setScalar(0.99);
mesh.add(meshBlack);

var clock = new THREE.Clock();
var elapsedTime = 0;
var angleSpeed = THREE.Math.degToRad(10);

renderer.setAnimationLoop(() => {
	elapsedTime = clock.getElapsedTime();
	
  mesh.rotation.y = Math.sin(elapsedTime) * THREE.MathUtils.degToRad(23);
	mesh.rotation.x -= 0.01;

  renderer.render(scene, camera)
});