这个3D克莱因瓶互动演示！DeepSeek一键完成-Relive-Pro主题演示站

此前我们介绍过很多用DeepSeek做H5页面了，今天我们看一个3D的互动演示效果。我们选择的对象是3D的克莱因瓶。

以下是一个简单的提示词：

用three.js做一个基于WebGL的H5的SPA，完成一个互动的克莱因瓶的效果。js库提供单独的多个CDN选择，并提示加载信息。

所有代码必须写在一个html文件中，不要拆分，不要简化。

以下是DeepSeek生成的内容，注意，是概率模型，每次生成的都不一样。生成前把深度思考和联网搜索的功能都关闭。

<!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;
            font-family: Arial, sans-serif;
            background: #000;
            color: #fff;
        }
        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            text-align: center;
            z-index: 100;
        }
        #loading-progress {
            width: 200px;
            height: 5px;
            background: #333;
            margin: 10px auto;
        }
        #loading-bar {
            height: 100%;
            width: 0%;
            background: #4CAF50;
            transition: width 0.3s;
        }
        #cdn-selector {
            position: absolute;
            bottom: 20px;
            left: 20px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }
        #controls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }
        button {
            background: #444;
            color: white;
            border: none;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background: #666;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="loading">
            <h2>加载中...</h2>
            <div id="loading-progress">
                <div id="loading-bar"></div>
            </div>
            <p id="loading-text">正在初始化...</p>
        </div>

        <div id="cdn-selector">
            <h3>选择CDN源</h3>
            <button onclick="loadCDN('jsdelivr')">jsDelivr</button>
            <button onclick="loadCDN('unpkg')">unpkg</button>
            <button onclick="loadCDN('cdnjs')">cdnjs</button>
            <button onclick="loadCDN('bootcdn')">BootCDN</button>
        </div>

        <div id="controls">
            <h3>控制</h3>
            <button id="auto-rotate">自动旋转: 开</button>
            <button id="wireframe">线框模式: 关</button>
            <button id="change-color">改变颜色</button>
        </div>
    </div>

    <script>
        // 配置
        const config = {
            autoRotate: true,
            wireframe: false,
            color: 0x00aaff,
            backgroundColor: 0x000000,
            lightColor: 0xffffff,
            lightIntensity: 1
        };

        // 状态变量
        let scene, camera, renderer, kleinBottle, controls;
        let isInitialized = false;
        let cdnLoaded = false;

        // CDN配置
        const cdnSources = {
            jsdelivr: {
                three: 'https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js',
                orbitControls: 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js',
                paramGeom: 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/geometries/ParametricGeometries.js'
            },
            unpkg: {
                three: 'https://unpkg.com/three@0.132.2/build/three.min.js',
                orbitControls: 'https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js',
                paramGeom: 'https://unpkg.com/three@0.132.2/examples/js/geometries/ParametricGeometries.js'
            },
            cdnjs: {
                three: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js',
                orbitControls: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/controls/OrbitControls.min.js',
                paramGeom: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/geometries/ParametricGeometries.js'
            },
            bootcdn: {
                three: 'https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js',
                orbitControls: 'https://cdn.bootcdn.net/ajax/libs/three.js/r128/examples/js/controls/OrbitControls.min.js',
                paramGeom: 'https://cdn.bootcdn.net/ajax/libs/three.js/r128/examples/js/geometries/ParametricGeometries.js'
            }
        };

        // 更新加载进度
        function updateProgress(progress, text) {
            document.getElementById('loading-bar').style.width = `${progress}%`;
            document.getElementById('loading-text').textContent = text;
        }

        // 加载CDN
        function loadCDN(cdnName) {
            if (cdnLoaded) {
                if (confirm('已经加载了Three.js，重新加载将刷新页面。确定吗？')) {
                    location.reload();
                }
                return;
            }

            const cdn = cdnSources[cdnName];
            if (!cdn) return;

            updateProgress(10, `正在从${cdnName}加载Three.js...`);

            // 加载Three.js
            const threeScript = document.createElement('script');
            threeScript.src = cdn.three;
            threeScript.onload = function() {
                updateProgress(40, 'Three.js加载成功，正在加载OrbitControls...');

                // 加载OrbitControls
                const orbitScript = document.createElement('script');
                orbitScript.src = cdn.orbitControls;
                orbitScript.onload = function() {
                    updateProgress(70, 'OrbitControls加载成功，正在加载ParametricGeometries...');

                    // 加载ParametricGeometries
                    const paramScript = document.createElement('script');
                    paramScript.src = cdn.paramGeom;
                    paramScript.onload = function() {
                        updateProgress(90, '所有依赖加载完成，正在初始化场景...');
                        cdnLoaded = true;
                        initScene();
                    };
                    paramScript.onerror = function() {
                        updateProgress(0, '加载ParametricGeometries失败，请尝试其他CDN源');
                    };
                    document.head.appendChild(paramScript);
                };
                orbitScript.onerror = function() {
                    updateProgress(0, '加载OrbitControls失败，请尝试其他CDN源');
                };
                document.head.appendChild(orbitScript);
            };
            threeScript.onerror = function() {
                updateProgress(0, '加载Three.js失败，请尝试其他CDN源');
            };
            document.head.appendChild(threeScript);
        }

        // 初始化场景
        function initScene() {
            if (isInitialized) return;
            isInitialized = true;

            // 创建场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(config.backgroundColor);

            // 创建相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

            // 创建渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

            // 添加光源
            const ambientLight = new THREE.AmbientLight(0x404040);
            scene.add(ambientLight);

            const directionalLight = new THREE.DirectionalLight(config.lightColor, config.lightIntensity);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);

            // 创建克莱因瓶
            createKleinBottle();

            // 添加轨道控制器
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;

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

            // 添加控制按钮事件
            document.getElementById('auto-rotate').addEventListener('click', toggleAutoRotate);
            document.getElementById('wireframe').addEventListener('click', toggleWireframe);
            document.getElementById('change-color').addEventListener('click', changeColor);

            updateProgress(100, '场景初始化完成！');
            setTimeout(() => {
                document.getElementById('loading').style.display = 'none';
            }, 500);

            // 开始动画循环
            animate();
        }

        // 创建克莱因瓶
        function createKleinBottle() {
            // 使用ParametricGeometries中的克莱因瓶参数方程
            const kleinBottleGeometry = new THREE.ParametricGeometry(
                function(u, v, target) {
                    u *= Math.PI;
                    v *= 2 * Math.PI;

                    u = u * 2;

                    let x, y, z;

                    if (u < Math.PI) {
                        x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(u) * Math.cos(v);
                        z = -8 * Math.sin(u) - 2 * (1 - Math.cos(u) / 2) * Math.sin(u) * Math.cos(v);
                    } else {
                        x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(v + Math.PI);
                        z = -8 * Math.sin(u);
                    }

                    y = -2 * (1 - Math.cos(u) / 2) * Math.sin(v);

                    target.set(x / 5, y / 5, z / 5);
                }, 
                50, 50
            );

            const material = new THREE.MeshPhongMaterial({
                color: config.color,
                specular: 0x111111,
                shininess: 30,
                side: THREE.DoubleSide,
                wireframe: config.wireframe
            });

            kleinBottle = new THREE.Mesh(kleinBottleGeometry, material);
            scene.add(kleinBottle);
        }

        // 窗口大小调整
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // 切换自动旋转
        function toggleAutoRotate() {
            config.autoRotate = !config.autoRotate;
            document.getElementById('auto-rotate').textContent = 
                `自动旋转: ${config.autoRotate ? '开' : '关'}`;
        }

        // 切换线框模式
        function toggleWireframe() {
            config.wireframe = !config.wireframe;
            kleinBottle.material.wireframe = config.wireframe;
            document.getElementById('wireframe').textContent = 
                `线框模式: ${config.wireframe ? '开' : '关'}`;
        }

        // 改变颜色
        function changeColor() {
            const hue = Math.random();
            const color = new THREE.Color().setHSL(hue, 0.7, 0.5);
            kleinBottle.material.color = color;
        }

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);

            if (config.autoRotate) {
                kleinBottle.rotation.x += 0.005;
                kleinBottle.rotation.y += 0.01;
            }

            controls.update();
            renderer.render(scene, camera);
        }

        // 默认加载jsdelivr
        window.onload = function() {
            loadCDN('jsdelivr');
        };
    </script>
</body>
</html>

只要把上述提示词中加粗的内容换成你想要的效果就可以生成其他的东西了。比如莫比乌斯圈。