3D 分子探秘 – 星火AI

<div class="ui-panel" ref="panel">
        <div class="header">
            <font color=white>咖啡因</font>
            <div class="subtitle">Caffeine</div>
        </div>

<div class="formula-card">
            <span class="label">化学式：</span>
            
            <span class="formula">$C_{8}H_{10}N_{4}O_{2}$</span>
        </div>

<div class="controls">
            <div class="control-group">
                <label>显示风格</label>
                <div class="btn-row">
                    <button :class="{ active: style === 'stick' }" @click="setStyle('stick')">球棍</button>
                    <button :class="{ active: style === 'sphere' }" @click="setStyle('sphere')">填充</button>
                    <button :class="{ active: style === 'line' }" @click="setStyle('line')">线条</button>
                </div>
            </div>

<div class="control-group">
                <label>交互</label>
                <button class="btn-toggle" :class="{ active: isSpinning }" @click="toggleSpin">
                    {{ isSpinning ? '🛑 停止旋转' : '🔄 自动旋转' }}
                </button>
            </div>
        </div>
    </div>
</div>

.chemistry-demo {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden;
}

.viewer-container {
    width: 100%;
    height: 100%;
    outline: none; /* 去除点击时的边框 */
}

.ui-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 280px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 24px;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.header {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.formula-card {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.label {
    font-size: 0.9rem;
    color: #aaa;
}

.formula {
    font-size: 1.2rem;
    font-weight: bold;
}

.control-group {
    margin-bottom: 20px;
}

.control-group label {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.btn-row {
    display: flex;
    gap: 8px;
}

button {
    flex: 1;
    padding: 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

button:hover {
    background: rgba(255, 255, 255, 0.15);
}

button.active {
    background: #4facfe;
    border-color: #4facfe;
    color: white;
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.4);
}

.btn-toggle {
    width: 100%;
    font-weight: bold;
}

const { createApp, ref, onMounted } = Vue;

// 咖啡因的分子数据 (SDF 格式)
// 为了演示方便，直接内嵌数据，避免跨域请求问题
const caffeineSDF = `
  Caffeine
  3Dmol
 14 15  0  0  0  0  0  0  0  0999 V2000
   -0.3315    0.8570    0.3542 N   0  0  0  0  0  0  0  0  0  0  0  0
   -0.1869   -0.4571    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.1294   -0.9029    0.3542 N   0  0  0  0  0  0  0  0  0  0  0  0
    2.1747    0.0536    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.7801    1.3536    0.3542 N   0  0  0  0  0  0  0  0  0  0  0  0
    0.4375    1.7107    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.2612   -1.3071    0.3542 O   0  0  0  0  0  0  0  0  0  0  0  0
    1.4116   -2.3355    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
    3.3857   -0.2714    0.3542 O   0  0  0  0  0  0  0  0  0  0  0  0
    2.7801    2.4465    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.7639    1.2415    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.1895    2.5512    0.3542 N   0  0  0  0  0  0  0  0  0  0  0  0
   -3.5209    2.5512    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.3645    3.6865    0.3542 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0  0  0  0
  1  6  1  0  0  0  0
  1 11  1  0  0  0  0
  2  3  1  0  0  0  0
  2  7  2  0  0  0  0
  3  4  1  0  0  0  0
  3  8  1  0  0  0  0
  4  5  1  0  0  0  0
  4  9  2  0  0  0  0
  5  6  1  0  0  0  0
  5 10  1  0  0  0  0
  6 11  2  0  0  0  0
 11 12  1  0  0  0  0
 12 13  1  0  0  0  0
 12 14  1  0  0  0  0
M  END
`;

createApp({
    setup() {
        const panel = ref(null);
        const style = ref('stick'); // 默认球棍模型
        const isSpinning = ref(true);
        let viewer = null;

// 初始化 3Dmol
        const initViewer = () => {
            // 获取容器
            const element = document.getElementById('molecule-viewer');
            
            // 配置 config
            const config = { backgroundColor: 'transparent' };
            
            // 创建 viewer (3Dmol 是全局变量，已自动加载)
            viewer = $3Dmol.createViewer(element, config);
            
            // 添加分子模型
            viewer.addModel(caffeineSDF, "sdf");
            
            // 设置初始样式
            applyStyle();
            
            // 调整视角以适应分子
            viewer.zoomTo();
            
            // 渲染
            viewer.render();
            
            // 开启自动旋转
            if (isSpinning.value) {
                viewer.spin('y', 0.5);
            }
        };

// 应用样式
        const applyStyle = () => {
            viewer.removeAllLabels(); // 清除旧标签（如果有）
            
            if (style.value === 'stick') {
                // 球棍模型：棒 + 小球
                viewer.setStyle({}, { 
                    stick: { radius: 0.15, colorscheme: 'Jmol' },
                    sphere: { radius: 0.4, colorscheme: 'Jmol' } 
                });
            } else if (style.value === 'sphere') {
                // 空间填充模型 (Van der Waals spheres)
                viewer.setStyle({}, { 
                    sphere: { scale: 0.85, colorscheme: 'Jmol' } 
                });
            } else if (style.value === 'line') {
                // 线条模型
                viewer.setStyle({}, { 
                    line: { linewidth: 2, colorscheme: 'greenCarbon' } 
                });
            }
            
            viewer.render();
        };

// 切换样式方法
        const setStyle = (newStyle) => {
            style.value = newStyle;
            applyStyle();
        };

// 切换旋转
        const toggleSpin = () => {
            isSpinning.value = !isSpinning.value;
            if (isSpinning.value) {
                viewer.spin('y', 0.5);
            } else {
                viewer.spin(false);
            }
        };

onMounted(() => {
            // 1. 初始化 3D 视图
            initViewer();

// 2. GSAP 入场动画
            if (panel.value) {
                gsap.fromTo(panel.value, 
                    { x: -50, opacity: 0 }, 
                    { x: 0, opacity: 1, duration: 1, ease: "power3.out", delay: 0.2 }
                );
            }

// 3. 渲染数学公式
            if (typeof renderMathInElement !== 'undefined') {
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: "$$", right: "$$", display: true},
                        {left: "$", right: "$", display: false}
                    ]
                });
            }
        });

return {
            panel,
            style,
            isSpinning,
            setStyle,
            toggleSpin
        };
    }
}).mount('#app');

完整代码

<div id="app" class="chemistry-demo">
    <!-- 3D 视图容器 -->
    <div id="molecule-viewer" class="viewer-container"></div>

    <!-- UI 界面 -->
    <div class="ui-panel" ref="panel">
        <div class="header">
            <font color=white>咖啡因</font>
            <div class="subtitle">Caffeine</div>
        </div>

        <!-- 化学式 (KaTeX) -->
        <div class="formula-card">
            <span class="label">化学式：</span>
            <!-- 严格遵守三段式：$公式$ + HTML + $公式$ -->
            <span class="formula">$C_{8}H_{10}N_{4}O_{2}$</span>
        </div>

        <!-- 控制按钮 -->
        <div class="controls">
            <div class="control-group">
                <label>显示风格</label>
                <div class="btn-row">
                    <button :class="{ active: style === 'stick' }" @click="setStyle('stick')">球棍</button>
                    <button :class="{ active: style === 'sphere' }" @click="setStyle('sphere')">填充</button>
                    <button :class="{ active: style === 'line' }" @click="setStyle('line')">线条</button>
                </div>
            </div>

            <div class="control-group">
                <label>交互</label>
                <button class="btn-toggle" :class="{ active: isSpinning }" @click="toggleSpin">
                    {{ isSpinning ? '🛑 停止旋转' : '🔄 自动旋转' }}
                </button>
            </div>
        </div>
    </div>
</div>

🔒

完整代码仅限会员查看

立即登录 / 注册

💡 这段代码完全由 AI 生成。

登录后可复制完整代码