当前位置：首页 > JavaScript

js实现星球转动

2026-02-02 13:21:37JavaScript

使用Three.js实现星球转动

Three.js是一个强大的JavaScript 3D库，可以轻松创建3D场景和动画。以下是一个简单的星球转动实现示例。

安装Three.js：

npm install three

HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>3D Planet Rotation</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

JavaScript代码（main.js）：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

// 创建球体（星球）
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00,
    wireframe: true 
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 旋转星球
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

// 响应窗口大小变化
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

添加纹理和光照

为了使星球看起来更真实，可以添加纹理和光照：

// 替换之前的material创建代码
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');
const material = new THREE.MeshPhongMaterial({ 
    map: texture 
});

// 添加光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(5, 5, 5);
scene.add(light);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

实现轨道控制

添加轨道控制器可以允许用户交互式查看星球：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 在渲染器创建后添加
const controls = new OrbitControls(camera, renderer.domElement);
controls.update(); // 必须在动画循环中调用

// 修改animate函数
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 需要更新控制器
    renderer.render(scene, camera);
}

添加星空背景

创建星空背景增强视觉效果：

// 创建星空背景
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 0.05
});

const starVertices = [];
for (let i = 0; i < 10000; i++) {
    const x = (Math.random() - 0.5) * 2000;
    const y = (Math.random() - 0.5) * 2000;
    const z = (Math.random() - 0.5) * 2000;
    starVertices.push(x, y, z);
}

starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);

性能优化

对于更复杂的场景，可以考虑以下优化：

js实现星球转动

// 使用性能监视器
import Stats from 'three/examples/jsm/libs/stats.module';
const stats = new Stats();
document.body.appendChild(stats.dom);

// 在animate函数中更新
function animate() {
    requestAnimationFrame(animate);
    stats.update();
    // ...其他代码
}

// 使用低多边形球体减少顶点数
const geometry = new THREE.SphereGeometry(1, 16, 16);

这个实现展示了如何使用Three.js创建一个基本的3D星球旋转动画，并逐步添加纹理、光照和交互控制等功能。根据需求可以进一步扩展，比如添加多个行星、实现公转轨迹或更复杂的光照效果。