可视化

使用THREE.js简单绘制一个地球

生成样式如下

var camera, scene, renderer;
var clock = new THREE.Clock();
var earth;
function init() {camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);camera.position.set(0, 100, 300);camera.lookAt(new THREE.Vector3(0, 0, 0))scene = new THREE.Scene();scene.background = new THREE.Color(0xeeeeee);renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.querySelector(opt.id).appendChild(renderer.domElement);//把canvas加载到dom元素中df_canvas = renderer.domElementif (THREE.OrbitControls) {new THREE.OrbitControls(camera, renderer.domElement);}//生成地球createEarth()animate()
}
//创建地球
function createEarth() {//光源 var light = new THREE.AmbientLight(0xffffff); // 环境光scene.add(light);//球体var _config = {radius: 100,//半径map: new THREE.TextureLoader().load('../image/earth.jpg'),//加载需要的地球贴图 地球图为宽高 2:1的图  }//圆形几何var geometry = new THREE.SphereBufferGeometry(_config.radius, 64, 64);//材质   如需要凹凸感 了解 bumpMapvar material = new THREE.MeshPhongMaterial({color: 0xffffff,//颜色map: _config.map,//bumpMap:"",凹凸});earth = new THREE.Mesh(geometry, material);scene.add(earth);
}function animate() {requestAnimationFrame(animate);var delta = clock.getDelta();renderer.render(scene, camera);earth.rotation.y += delta / 5;
}
init();

地球纹理，不是高清图；如需要自行搜索
资源