之前分别用阿里通义千问 Qwen2.5-Max 、Grok 3，以及 Claude 3.7 Sonnet 生成了 3D 地月系统模拟的代码。通义千问和 Grok 3 都一次性生成了准确完整的代码，Qwen 生成的较为美观，Grok 速度更快，操作性更强。Claude 第一次生成有错误，经过两轮修改后修复了错误，代码质量比前两者要高。
从开始生成代码到完成，DeepSeek 新版 V3 仅用了 1 分钟，且一次性生成，没有任何错误。生成的代码不仅准确地模拟了地月系统的运动方式，还展现了极高的细节品质。地球和月球的纹理非常精美，尤其是地球的纹理，完整呈现了地形地貌的细节，视觉效果十分逼真。此外，系统的缩放和旋转操作也非常流畅，用户体验极佳。
提示
请基于 Three.js 制作地月系统演示，Three.js 使用 cdn，输出一个完整的html文件
演示
地月系统演示
DeepSeek V3 完整代码
<![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地月系统演示 - Three.js</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
color: white;
font-family: Arial, sans-serif;
pointer-events: none;
}
</style>
</head>
<body>
<div id="info">地月系统演示 - 月球绕地球公转</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script>
// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 添加轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 设置相机位置
camera.position.z = 30;
// 添加环境光和定向光
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);
// 创建地球
const earthGeometry = new THREE.SphereGeometry(5, 32, 32);
const earthMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg'),
specularMap: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg'),
normalMap: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg'),
specular: new THREE.Color('grey'),
shininess: 5
});
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);
// 创建月球
const moonGeometry = new THREE.SphereGeometry(1.27, 32, 32);
const moonMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/moon_1024.jpg'),
normalMap: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/moon_normal_1024.jpg'),
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
scene.add(moon);
// 设置月球初始位置 (距离地球约384,400km，按比例缩小)
moon.position.x = 10;
// 添加星空背景
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.1
});
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);
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 地球自转
earth.rotation.y += 0.005;
// 月球公转
const time = Date.now() * 0.0005; // 减慢速度
moon.position.x = Math.cos(time) * 10;
moon.position.z = Math.sin(time) * 10;
// 月球自转 (总是面向地球)
moon.rotation.y += 0.01;
controls.update();
renderer.render(scene, camera);
}
// 处理窗口大小变化
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
</script>
</body>
</html>
]]>
