js实现星球转动
使用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动画：
<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可以创建更自定义的星球效果：
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方案则提供了更多的自定义控制能力。
