政安晨【零基础玩转各类开源AI项目】探索Cursor-AI Coder的应用实例

政安晨的个人主页：政安晨

欢迎 👍点赞✍评论⭐收藏

希望政安晨的博客能够对您有所裨益，如有不足之处，欢迎在评论区提出指正！

Cursor 是 Visual Studio Code 的一个分支。这使我们能够专注于创造使用人工智能进行编码的最佳方式，同时提供熟悉的文本编辑体验。

Cusor的主要特点

Cursor 编辑器是一款功能强大的代码编辑器，主要有以下特点：

一、编程辅助功能

智能代码补全
- 它能够根据编程语言的语法规则和上下文，自动补全代码片段。例如，在编写 Python 程序时，当你输入一个函数的开头几个字母，如 “pri”，它会自动提示 “print ()” 这个函数，这大大提高了编码效率，减少了手动输入代码的时间和出错的概率。
代码生成
- Cursor 可以根据自然语言描述生成代码。比如，你输入 “写一个函数来计算两个数的和”，它能够生成类似以下 Python 代码：

def add_numbers(a, b):
    return a + b

对于复杂的算法或者特定的编程任务，这种代码生成功能可以为程序员提供一个很好的起点，他们可以在生成代码的基础上进行修改和完善。

二、支持多种编程语言

它支持广泛的编程语言，包括但不限于 Python、Java、JavaScript、C++、C# 等。
- 对于 Web 开发人员，他们可以使用 Cursor 编写前端的 JavaScript 和 CSS 代码，同时也能处理后端的 Python（如使用 Flask 或 Django 框架）或者 Java 代码。对于游戏开发者，在编写 C++ 或 C# 游戏逻辑代码时，也能借助 Cursor 来提高开发效率。

三、界面和使用体验

简洁直观的界面
- 其界面设计简洁，易于新手学习和上手。工具栏和菜单布局合理，代码编辑区域清晰，能够让用户专注于代码编写。例如，代码的语法高亮显示可以让不同类型的代码元素（如变量、函数、关键字等）以不同的颜色区分开来，增强了代码的可读性。
方便的文件管理
- 可以方便地在编辑器中打开、保存和管理文件。用户能够轻松地在不同的项目文件夹之间切换，并且可以快速地查找和打开特定的代码文件。

这是官网：https://www.cursor.com/

安装工具后，进行。

Cusor实操

使用AI编程一个3D骰子的H5程序：

描述：

基于three.js框架开发一个支持鼠标和触屏的科幻风3D骰子程序，支持屏幕缩放，骰子落入地面后，与地面齐平，符合物理规律，朝上的面随机显示数字，两个骰子朝上面的数字不能总是完全一样，骰子在空中旋转时速度适中，不能太慢，但可以让玩家看到数字变化的过程。

生成代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>3D 科幻骰子</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div id="info">点击骰子进行投掷，滚轮或双指缩放</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer;
        let dice1, dice2;
        let isRolling = false;
        let floor;

        init();
        animate();

        function init() {
            // 场景设置
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);

            // 相机设置
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 10;
            camera.position.y = 5;
            camera.lookAt(0, 0, 0);

            // 渲染器设置
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            document.body.appendChild(renderer.domElement);

            // 灯光设置
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            const pointLight = new THREE.PointLight(0xffffff, 1);
            pointLight.position.set(10, 10, 10);
            pointLight.castShadow = true;
            scene.add(pointLight);

            // 创建地面
            const floorGeometry = new THREE.PlaneGeometry(20, 20);
            const floorMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x404040,
                side: THREE.DoubleSide
            });
            floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.rotation.x = -Math.PI / 2;
            floor.position.y = -2;
            floor.receiveShadow = true;
            scene.add(floor);

            // 创建骰子
            createDice();

            // 添加点击事件
            renderer.domElement.addEventListener('click', rollDice);

            // 添加缩放事件
            renderer.domElement.addEventListener('wheel', onZoom);
            renderer.domElement.addEventListener('touchstart', onTouchStart);
            renderer.domElement.addEventListener('touchmove', onTouchMove);

            // 窗口大小调整
            window.addEventListener('resize', onWindowResize, false);
        }

        let touchStartDistance = 0;
        function onTouchStart(event) {
            if (event.touches.length === 2) {
                const dx = event.touches[0].pageX - event.touches[1].pageX;
                const dy = event.touches[0].pageY - event.touches[1].pageY;
                touchStartDistance = Math.sqrt(dx * dx + dy * dy);
            }
        }

        function onTouchMove(event) {
            if (event.touches.length === 2) {
                const dx = event.touches[0].pageX - event.touches[1].pageX;
                const dy = event.touches[0].pageY - event.touches[1].pageY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                const delta = distance - touchStartDistance;
                camera.position.z = Math.max(5, Math.min(15, camera.position.z - delta * 0.01));
                touchStartDistance = distance;
            }
        }

        function onZoom(event) {
            const delta = event.deltaY;
            camera.position.z = Math.max(5, Math.min(15, camera.position.z + delta * 0.01));
        }

        function createDice() {
            const geometry = new THREE.BoxGeometry(2, 2, 2);
            const materials = [];
            
            // 创建骰子材质
            for (let i = 0; i < 6; i++) {
                const canvas = document.createElement('canvas');
                canvas.width = 128;
                canvas.height = 128;
                const context = canvas.getContext('2d');
                
                context.fillStyle = '#000000';
                context.fillRect(0, 0, 128, 128);
                
                context.fillStyle = '#00ffff';
                context.font = '80px Arial';
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.fillText(i + 1, 64, 64);
                
                const texture = new THREE.CanvasTexture(canvas);
                materials.push(new THREE.MeshPhongMaterial({ 
                    map: texture, 
                    transparent: true,
                    emissive: 0x00ffff,
                    emissiveIntensity: 0.2
                }));
            }

            // 创建两个骰子
            dice1 = new THREE.Mesh(geometry, materials);
            dice2 = new THREE.Mesh(geometry, materials);
            
            dice1.position.set(-2, 3, 0);
            dice2.position.set(2, 3, 0);
            
            dice1.castShadow = true;
            dice2.castShadow = true;
            
            // 添加点光源作为骰子的光晕效果
            const dice1Light = new THREE.PointLight(0x00ffff, 0.5, 3);
            const dice2Light = new THREE.PointLight(0x00ffff, 0.5, 3);
            dice1Light.position.copy(dice1.position);
            dice2Light.position.copy(dice2.position);
            scene.add(dice1Light);
            scene.add(dice2Light);
            
            scene.add(dice1);
            scene.add(dice2);
        }

        function rollDice() {
            if (isRolling) return;
            isRolling = true;

            // 重置骰子位置
            dice1.position.y = 3;
            dice2.position.y = 3;

            // 为每个骰子生成随机的最终旋转角度
            const finalRotation1 = {
                x: Math.floor(Math.random() * 4) * (Math.PI / 2),
                y: Math.floor(Math.random() * 4) * (Math.PI / 2),
                z: Math.floor(Math.random() * 4) * (Math.PI / 2)
            };
            
            const finalRotation2 = {
                x: Math.floor(Math.random() * 4) * (Math.PI / 2),
                y: Math.floor(Math.random() * 4) * (Math.PI / 2),
                z: Math.floor(Math.random() * 4) * (Math.PI / 2)
            };

            const duration = 2000;
            const start = Date.now();
            const gravity = -9.8;
            const initialVelocity = 2;
            let velocity = initialVelocity;

            function animate() {
                const elapsed = Date.now() - start;
                const progress = elapsed / duration;

                if (progress < 1) {
                    // 应用重力
                    velocity += gravity * 0.016;
                    dice1.position.y = Math.max(-1, dice1.position.y + velocity * 0.016);
                    dice2.position.y = Math.max(-1, dice2.position.y + velocity * 0.016);

                    // 旋转 - 速度增加3倍
                    if (dice1.position.y > -1) {
                        dice1.rotation.x += 0.6;
                        dice1.rotation.y += 0.9;
                        dice1.rotation.z += 0.3;
                    }
                    if (dice2.position.y > -1) {
                        dice2.rotation.x += 0.9;
                        dice2.rotation.y += 0.6;
                        dice2.rotation.z += 0.45;
                    }

                    // 碰撞检测
                    if (dice1.position.y <= -1) {
                        velocity = Math.abs(velocity) * 0.5;
                        dice1.rotation.x = finalRotation1.x;
                        dice1.rotation.y = finalRotation1.y;
                        dice1.rotation.z = finalRotation1.z;
                        dice2.rotation.x = finalRotation2.x;
                        dice2.rotation.y = finalRotation2.y;
                        dice2.rotation.z = finalRotation2.z;
                    }

                    requestAnimationFrame(animate);
                } else {
                    // 停止时确保骰子是平放的
                    dice1.position.y = -1;
                    dice2.position.y = -1;
                    dice1.rotation.x = finalRotation1.x;
                    dice1.rotation.y = finalRotation1.y;
                    dice1.rotation.z = finalRotation1.z;
                    dice2.rotation.x = finalRotation2.x;
                    dice2.rotation.y = finalRotation2.y;
                    dice2.rotation.z = finalRotation2.z;
                    isRolling = false;
                }
            }

            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>

效果图如下：

增加修改为：

请更改骰子中的数字颜色为科技红色。

全选代码，Ctrl+K，输入提示，Ctrl+回车，接受预览。

不满意？修改！

把骰子的颜色再变得对比强烈一些

            const floorMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x202020,  // 地面颜色调暗

魔化了，嘻嘻。

OK，产品经理的春天来了，世界仿佛一下子变得安静了。

政安晨【零基础玩转各类开源AI项目】探索Cursor-AI Coder的应用实例

Cusor的主要特点

Cusor实操

悦读