可视化-three.js绘制一个地球

使用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.domElement
    if (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);
    //材质   如需要凹凸感 了解 bumpMap
    var 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();

地球纹理，不是高清图；如需要自行搜索
https://download.csdn.net/download/qq_29814417/11865611 资源