思路就是创建一个球体，并且找一张地球展开图，贴在球体上

网上找了一张地球展开图

引入必要的js//引入threejs

//这个工具js是运行你控制场景旋转缩放的

核心代码

//动画帧函数

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ){

window.setTimeout(callback, 1000 / 60);

};

})();

//初始化

function init() {

// 创建场景

var scene = new THREE.Scene();

// 创建一个透视相机

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个webGL的渲染器

var webGLRenderer = new THREE.WebGLRenderer();

webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

webGLRenderer.setSize(window.innerWidth, window.innerHeight);

webGLRenderer.shadowMapEnabled = true;

// 创建球体的函数

createMesh(new THREE.SphereGeometry(40, 100, 100));

//设置相机位置

camera.position.x = 120;

camera.position.y = 0;

camera.position.z = 0;

//camera.lookAt(new THREE.Vector3(10, 0, 0));

//添加到dom中

document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

// call the render function

var step = 0;

var mesh = {} ;

function createMesh(geom) {

var loader = new THREE.TextureLoader();

var material = new THREE.MeshBasicMaterial();

// 加载资源

loader.load(

//贴图地址

'http://www.myjscode.com/images/earth1.jpg',

//图片下载完成的回调

function ( texture ) {

//设置材质的纹理

material.map = texture ;

mesh = new THREE.Mesh( geom, material );

mesh.position.set(0,0,0);

scene.add(mesh);

render();

},

// 图片现在过程中

function ( xhr ) {

// console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );

},

//图片下载失败

function ( xhr ) {

//console.log( 'An error happened' );

}

);

}

//渲染函数

function render() {

//mesh.rotation.y = step += 0.004;

requestAnimFrame(render);//必须启动帧动画，否则无法实现鼠标和手型控制

webGLRenderer.render(scene, camera);

}

//控制场景的辅助对象

var orbit = new THREE.OrbitControls( camera, webGLRenderer.domElement );

orbit.minDistance = 50;

orbit.maxDistance = 1000;

}

window.onload = init;

demo