threejs 星空背景地球

three.js是一个基于WebGL的JavaScript库，用于在网页上创建和显示3D图形。它提供了许多方便的API，使得开发者可以不必深入了解WebGL复杂的底层细节，就能创建出丰富的3D场景和动画效果。在three.js中，可以创建星空背景和地球的场景，实现一个逼真的星空和旋转地球的效果。

要创建一个星空背景和地球，你需要以下几个步骤：

1. 引入three.js库：首先需要在你的网页中引入three.js库文件。

2. 创建场景（Scene）：这是three.js中的一个基础概念，场景可以视为一个3D空间，在这个空间内可以添加各种3D对象。

3. 创建摄像机（Camera）：摄像机决定了你从哪个角度和位置观察场景中的物体。

4. 创建渲染器（Renderer）：渲染器是将你的3D场景绘制到网页上的工具，three.js提供了WebGLRenderer来使用WebGL进行渲染。

5. 创建地球模型：可以使用three.js提供的几何体（如SphereGeometry）来创建地球的基本形状，然后使用材质（如MeshPhongMaterial）来给这个几何体上色。

6. 创建星空背景：可以创建一个巨大的球体来作为星空背景，然后使用纹理贴图（TextureLoader）加载一张星空图片作为背景贴在球体上。

7. 创建光源（Light）：为了让地球和星空更加逼真，需要添加一些光源，比如点光源或者环境光。

8. 动画与交互：设置一个动画循环（如使用requestAnimationFrame），让地球能够根据设定的速度旋转，同时也可以添加鼠标事件监听器来允许用户通过鼠标移动来观察不同的视角。

下面是一个简化的代码示例，以展示创建星空背景和旋转地球的步骤：

// 步骤1：引入three.js库
// <script src="three.js"></script>

// 步骤2：创建场景
var scene = new THREE.Scene();

// 步骤3：创建摄像机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 步骤4：创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 步骤5：创建地球模型
var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial({color: 0x2266FF});
var earthMesh = new THREE.Mesh(geometry, material);
scene.add(earthMesh);

// 步骤6：创建星空背景
var starsMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF, map: new THREE.TextureLoader().load('path_to_starfield.jpg')});
var starsGeometry = new THREE.SphereGeometry(1000, 64, 64);
var starsMesh = new THREE.Mesh(starsGeometry, starsMaterial);
scene.add(starsMesh);

// 步骤7：创建光源
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(5, 3, 5);
scene.add(light);

// 步骤8：动画与交互
function animate() {
    requestAnimationFrame(animate);
    earthMesh.rotation.y += 0.005; // 让地球旋转
    renderer.render(scene, camera);
}

animate();

注意：请确保你有一个合适的星空背景图和地球表面的贴图，并将它们的路径正确设置到代码中的 'path_to_starfield.jpg' 和地球材质中。