JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<input type="button" id="clickme" value="Click Me" />
JavaScript
var renderer = new THREE.WebGLRenderer();
init();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, 1, 0.1, 200);
renderer.setSize(600, 600);
document.body.appendChild(renderer.domElement);
geo = new THREE.SphereGeometry(30, 20, 20);
THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('http://placekitten.com/g/300/300');
mat = new THREE.MeshBasicMaterial({
map: texture
});
sphere = new THREE.Mesh(geo, mat);
camera.position.z = 60;
scene.add(sphere);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
$('#clickme').on('click', function () {
var multiple = 2; //Change this value to rotate at different angles
var rotationVector = new THREE.Vector3(0,1,0);
var angle = ((360 / multiple) * Math.PI) / 180;
for (var i = 0; i < multiple; i++) {
sphere.rotateOnAxis(rotationVector, angle);
alert(i);
}
});