window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function animate(lastTime, angularSpeed, three){
// update this frame
var time = new Date().getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
three.earth.rotation.y += angleChange;
lastTime = time;
// render this frame
three.renderer.render(three.scene, three.camera);
// next frame
requestAnimFrame(function(){
animate(lastTime, angularSpeed, three);
});
}
window.onload = function(){
var angularSpeed = 0.005;
var lastTime = 0;
// load renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// set a camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;
// create a scene
var scene = new THREE.Scene();
// add a texture to a material
var material = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture("https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg")
});
// create an earth object
var earth = new THREE.Mesh(new THREE.SphereGeometry(200, 50, 50), material);
earth.overdraw = true;
scene.add(earth);
// add a directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(2, 1, 2).normalize();
scene.add(directionalLight);
// keep everything together to make passing it around easier
var three = {
renderer: renderer,
camera: camera,
scene: scene,
earth: earth
};
// Preload textures before begining animation
var textureImg = new Image();
textureImg.onload = function(){
animate(lastTime, angularSpeed, three, this);
};
textureImg.src = "https://joshcarllewis.com/static/articles/html5-3d-canvas-tutorial/earth.jpg";
};