之前用阿里通义千问 Qwen2.5-Max 生成了模拟地月系统的 3D js 代码（通义千问生成 3D 地月系统模拟），效果相当不错。让我们看看同样的提示词，Grok 3 的表现如何？

提示词

代码生成总共耗时 25 秒，比 Qwen2.5-Max 更快，且同样一次性通过，没有任何 bug。

不过，Grok 3 生成的地球和月亮没有贴上纹理，美观度稍显不足。但相比之下，Qwen2.5-Max 生成的是一个静态的运动模拟，无法进行交互，而 Grok 3 的版本支持缩放和视角变换，功能性更强。

此外，Grok 3 生成的代码结构清晰，思维链完整，且代码说明和使用方法比 Qwen2.5-Max 更加详细和完善。就单次测试而言，Grok 3 的代码质量整体上优于 Qwen2.5-Max。

演示

Grok 3 生成 3D 地月系统模拟

完整演示

完整 Grok 聊天内容

完整代码


<!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>