之前用阿里通义千问 Qwen2.5-Max 生成了模拟地月系统的 3D js 代码（通义千问生成 3D 地月系统模拟），效果相当不错。让我们看看同样的提示词，Grok 3 的表现如何？
提示词
请基于 Three.js 制作地月系统演示，Three.js 使用 cdn，输出一个完整的html文件代码生成总共耗时 25 秒，比 Qwen2.5-Max 更快，且同样一次性通过，没有任何 bug。
不过，Grok 3 生成的地球和月亮没有贴上纹理，美观度稍显不足。但相比之下，Qwen2.5-Max 生成的是一个静态的运动模拟，无法进行交互，而 Grok 3 的版本支持缩放和视角变换，功能性更强。
此外，Grok 3 生成的代码结构清晰，思维链完整，且代码说明和使用方法比 Qwen2.5-Max 更加详细和完善。就单次测试而言，Grok 3 的代码质量整体上优于 Qwen2.5-Max。
演示
完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地月系统演示</title> <style> body { margin: 0; overflow: hidden; } #scene { width: 100vw; height: 100vh; } </style> </head> <body> <div id="scene"></div> <!-- 通过 CDN 引入 Three.js 和 OrbitControls --> <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script> <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script> <script> // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera( 75, // 视角（FOV） window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); camera.position.z = 20; // 设置相机位置 // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('scene').appendChild(renderer.domElement); // 创建地球 const earthGeometry = new THREE.SphereGeometry(5, 32, 32); // 半径 5 const earthMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // 蓝色 const earth = new THREE.Mesh(earthGeometry, earthMaterial); scene.add(earth); // 创建月球 const moonGeometry = new THREE.SphereGeometry(1, 32, 32); // 半径 1 const moonMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa }); // 灰色 const moon = new THREE.Mesh(moonGeometry, moonMaterial); moon.position.x = 10; // 初始位置 scene.add(moon); // 添加光源 const ambientLight = new THREE.AmbientLight(0x404040); // 环境光 scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1, 100); // 点光源 pointLight.position.set(10, 10, 10); scene.add(pointLight); // 添加 OrbitControls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // 启用阻尼效果 controls.dampingFactor = 0.05; // 动画函数 function animate() { requestAnimationFrame(animate); // 更新月球位置（绕地球旋转） const time = Date.now() * 0.001; // 时间因子 moon.position.x = 10 * Math.cos(time); // x 坐标 moon.position.z = 10 * Math.sin(time); // z 坐标 controls.update(); // 更新控制器 renderer.render(scene, camera); // 渲染场景 } // 启动动画 animate(); // 响应窗口大小变化 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html>
