用js创造一个3D地球模型

可以使用Three.js库来创建一个3D地球模型，具体步骤如下：

1. 引入Three.js库和相关依赖库，例如OrbitControls.js和Stats.js。

2. 创建一个场景(scene)、相机(camera)和渲染器(renderer)。

3. 创建一个球体(geometry)，并将其贴上地球贴图(texture)。

4. 创建一个材质(material)，并将其应用到球体上。

5. 将球体添加到场景中。

6. 使用OrbitControls.js库来实现鼠标控制相机的旋转和缩放。

7. 使用Stats.js库来显示渲染性能。

代码示例：

// 引入Three.js库和相关依赖库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 100);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建球体并贴上地球贴图
const geometry = new THREE.SphereGeometry(5, 32, 32);
const texture = new THREE.TextureLoader().load('earth.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(geometry, material);

// 将球体添加到场景中
scene.add(sphere);

// 创建OrbitControls对象并绑定相机
const controls = new OrbitControls(camera, renderer.domElement);

// 创建Stats对象并添加到页面中
const stats = new Stats();
document.body.appendChild(stats.dom);

// 渲染函数
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  stats.update();
}

// 调整相机位置
camera.position.z = 10;

// 调用渲染函数
render();

运行代码后，即可看到一个3D地球模型。