threejs 3d地球效果学习，今天学习通过纹理贴图渲染一个地球效果，最终实现大屏3D地球可视化实例的效果。

效果演示

threejs 通过纹理贴图渲染一个地球效果

代码

通过纹理加载器textureLoader加载贴图，通过SphereBufferGeometry创建一个球体几何对象，创建材质对象，最终完成上图的效果。

function createSphereMesh(R) {
  // TextureLoader创建一个纹理加载器对象，可以加载图片作为纹理贴图
  var textureLoader = new THREE.TextureLoader();
  var texture = textureLoader.load(modelUrl + 'static/earth1.jpg');//加载纹理贴图
  var geometry = new THREE.SphereBufferGeometry(R, 40, 40); //创建一个球体几何对象
  //材质对象Material
  var material = new THREE.MeshLambertMaterial({
    // color: 0x00ffff,
    map: texture,//设置地球颜色贴图map
  });
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  return mesh
}

// 创建地球mesh
var R = 100;//地球半径
var earth = createSphereMesh(R);

export { earth }

通过设置rotateY达到让地球转起来的效果

function render() {
  earth.rotateY(0.01);//地球绕y轴旋转动画
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();