当前位置：首页 > JavaScript

js实现星球转动

2026-04-07 06:54:17JavaScript

使用Three.js实现3D星球转动

Three.js是一个基于WebGL的JavaScript库，可以轻松创建3D图形效果。以下是实现星球转动的基本代码示例：

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 textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');

// 创建材质
const material = new THREE.MeshBasicMaterial({ map: texture });

// 创建星球网格
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

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

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

    renderer.render(scene, camera);
}
animate();

使用CSS 3D变换实现简单星球效果

对于简单的2D星球效果，可以使用CSS动画：

js实现星球转动

<div class="planet"></div>

<style>
.planet {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #3498db, #2c3e50);
    animation: rotate 10s linear infinite;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.6);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>

使用Canvas绘制旋转星球

使用Canvas API可以创建更自定义的星球效果：

js实现星球转动

const canvas = document.getElementById('planetCanvas');
const ctx = canvas.getContext('2d');

let angle = 0;

function drawPlanet() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制星球
    const gradient = ctx.createRadialGradient(150, 150, 0, 150, 150, 100);
    gradient.addColorStop(0, '#3498db');
    gradient.addColorStop(1, '#2c3e50');

    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();

    // 添加旋转效果
    ctx.save();
    ctx.translate(150, 150);
    ctx.rotate(angle);

    // 绘制特征（如云带）
    ctx.beginPath();
    ctx.ellipse(0, 0, 120, 40, 0, 0, Math.PI * 2);
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.restore();

    angle += 0.01;
    requestAnimationFrame(drawPlanet);
}

drawPlanet();

添加交互控制

为Three.js实现的星球添加鼠标交互控制：

// 添加轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// 修改动画循环
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

优化星球视觉效果

提升Three.js星球的真实感：

// 使用更高级的材质
const material = new THREE.MeshPhongMaterial({
    map: texture,
    bumpMap: textureLoader.load('path/to/bump_map.jpg'),
    bumpScale: 0.05,
    specular: new THREE.Color('grey'),
    shininess: 5
});

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

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

以上方法提供了从简单到复杂的多种实现方式，可根据项目需求选择合适的方案。Three.js方案适合需要高质量3D效果的场景，CSS方案适合简单的页面装饰，Canvas方案则提供了更多的自定义控制能力。