通义千问生成 3D 地月系统模拟

通义千问Qwen2.5-Max仅用1分多钟，便生成了一个可直接运行的地月系统3D模拟HTML文件：基于CDN引入的Three.js，代码无错误、结构清晰，附带完整思维链与部署说明，展现了其扎实可靠的前端代码生成能力。

发布于2025年2月25日 09:52

作者零重力瓦力

评论0 条

阅读2

试了一下阿里通义千问 Qwen2.5-Max 的编码能力，效果相当惊艳。

提示词

请基于 Three.js 制作地月系统演示，Three.js 使用 cdn，输出一个完整的html文件

整个代码的生成过程大约 1 分多钟，一次性通过，没有任何 bug，运行效果也非常不错。代码很整洁，还提供了完整的思维链，以及代码的使用和部署方法，体验相当出色。

演示

完整演示

完整代码


<!DOCTYPE html>
<html>
<head>
    <title>地月系统演示</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 初始化场景
        const scene = new THREE.Scene();
        
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            75, 
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        camera.position.z = 15;
        
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // 添加光源
        const ambientLight = new THREE.AmbientLight(0x404040, 1);
        scene.add(ambientLight);
        
        const pointLight = new THREE.PointLight(0xffffff, 1.5);
        pointLight.position.set(10, 10, 10);
        scene.add(pointLight);
        
        // 创建地球
        const earthGeometry = new THREE.SphereGeometry(1, 32, 32);
        const earthMaterial = new THREE.MeshPhongMaterial({
            map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg'),
            bumpScale: 0.05,
            specular: new THREE.Color('grey'),
            shininess: 10
        });
        const earth = new THREE.Mesh(earthGeometry, earthMaterial);
        scene.add(earth);
        
        // 创建月球
        const moonGeometry = new THREE.SphereGeometry(0.27, 32, 32);
        const moonMaterial = new THREE.MeshPhongMaterial({
            map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/moon_1024.jpg')
        });
        const moon = new THREE.Mesh(moonGeometry, moonMaterial);
        moon.position.x = 2.5; // 地月距离比例缩小
        
        // 创建月球轨道
        const orbitGeometry = new THREE.RingGeometry(2.4, 2.6, 64);
        const orbitMaterial = new THREE.MeshBasicMaterial({
            color: 0x444444,
            side: THREE.DoubleSide
        });
        const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
        orbit.rotation.x = Math.PI/2;
        scene.add(orbit);
        
        // 动画循环
        let earthRotation = 0;
        let moonRotation = 0;
        const moonOrbitRadius = 2.5;
        
        function animate() {
            requestAnimationFrame(animate);
            
            // 地球自转
            earth.rotation.y += 0.005;
            
            // 月球公转
            moonRotation += 0.015;
            moon.position.x = Math.cos(moonRotation) * moonOrbitRadius;
            moon.position.z = Math.sin(moonRotation) * moonOrbitRadius;
            
            // 月球自转
            moon.rotation.y += 0.002;
            
            renderer.render(scene, camera);
        }
        
        // 窗口大小变化处理
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // 添加天体到场景
        scene.add(earth);
        earth.add(moon);
        
        animate();
    </script>
</body>
</html>