Пример модели земного шара на WebGL
Рабочий пример здесь:
Пример модели земного шара на WebGL
Так это выглядит в браузере на android:
<![CDATA[<html><body>
<script src="/webgl/three.min.js"></script>
<script type="text/delayscript">
var customMaterial, sphere, clouds;
function init(){
renderer.setClearColor(0x0a0a0a, 1);
renderer.sortObjects = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
// Materials
var imgTexture = THREE.ImageUtils.loadTexture("textures/space/EarthMap_2500x1250.jpg");
var material = new THREE.MeshPhongMaterial({ map: imgTexture, bumpMap: imgTexture, bumpScale: 1 });
var geometry = new THREE.SphereGeometry(270, 100, 100);
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
var imgTexture2 = THREE.ImageUtils.loadTexture("textures/space/EarthClouds_2500x1250.jpg");
clouds = new THREE.Mesh(
new THREE.SphereGeometry(271, 100, 100),
new THREE.MeshBasicMaterial({map: imgTexture2,color: 0xffffff, transparent: true, blending: THREE.AdditiveBlending})
);
scene.add(clouds);
//stars
var particles = new THREE.Geometry;
var d=10000, r=250;
for (var p = 0; p < 20000; p++){
var particle = new THREE.Vector3(
Math.random()*d -d/2,
Math.random()*d -d/2,
Math.random()*d -d/2
);
particles.vertices.push(particle);
}
var particleMaterial = new THREE.ParticleBasicMaterial({ color: 0xeeeeee, size: 1 });
var particleSystem = new THREE.ParticleSystem(particles, particleMaterial);
scene.add(particleSystem);
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5);
directionalLight.position.set(1000, 500, -200).normalize();
scene.add(directionalLight);
}
function animate(){
sphere.rotation.y += 0.001;
clouds.rotation.y += 0.0011;
}
var container, camera, scene, renderer, controls;
_init();
_animate();
function _init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.x = Math.cos( 1 ) * 800;
camera.position.z = Math.sin( 1 ) * 800;
camera.lookAt( scene.position );
// render
renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer({antialias: true}) : new THREE.CanvasRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
container = document.createElement('div');
container.appendChild(renderer.domElement);
init();
document.body.appendChild(container);
window.addEventListener('resize', function(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}, false);
}
function _animate(){
requestAnimationFrame(_animate);
animate();
renderer.render( scene, camera );
}
</script>
</body></html>
]]>