three+python加载加密解密渲染展示三维模型解决方案

three+python加载加密解密渲染展示三维模型解决方案


使用 Python 创建一个加密脚本,该脚本采用行业标准的 AES-GCM 算法来加密您的 3D 模型文件(如 .glb, .gltf 等)。

使用 HTML 和 Three.js 创建一个网页,该网页能够:

获取加密后的模型文件。

在浏览器端使用 Web Crypto API (SubtleCrypto) 进行解密。

将解密后的数据加载到 Three.js 场景中并显示出来。

这个方案的优点是,您的原始 3D 模型文件永远不会以明文形式存储在服务器上或通过网络传输,大大提高了模型的安全性。

整体架构

离线加密 (Python): 你在本地运行一个 Python 脚本,输入你的 .glb 文件,它会输出一个加密后的 .enc 文件和一个密钥。

Web 服务器: 你需要一个简单的 Web 服务器来托管你的网页 (index.html) 和加密后的模型文件 (.enc)。

客户端解密和渲染 (JavaScript): 用户的浏览器加载 index.html。页面中的 JavaScript 代码会:a. 下载加密的模型文件。b. 使用预设的密钥在内存中解密文件数据。c. 将解密后的二进制数据转换成 Three.js 可以加载的格式。d. 渲染 3D 模型。

步骤 1: 准备工作

安装 Python: 确保你的电脑上安装了 Python

安装加密库: 我们将使用 cryptography 库,这是一个强大且受推荐的 Python 加密库。

pip install cryptography

准备一个模型: 找一个 .glb 或 .gltf 格式的 3D 模型。为了方便,我们假设你有一个名为 model.glb 的文件。

步骤 2: Python 加密脚本

创建一个名为 encrypt_model.py 的文件,并将以下代码复制进去。

encrypt_model.py

import os
from cryptography.hazmat.primitives.ciphers.aead import AESGCM

def encrypt_file(input_file, output_file):
    """
    使用 AES-GCM 加密文件。

    AES-GCM 是一种“认证加密”模式,它同时提供保密性、完整性和真实性。
    输出文件的格式为: nonce (12字节) + tag (16字节) + ciphertext
    """
    # 1. 生成一个安全的密钥和 nonce (一次性数)
    # 密钥必须是 16, 24, 或 32 字节长 (对应 AES-128, AES-192, AES-256)
    key = AESGCM.generate_key(bit_length=128)  # AES-128
    aesgcm = AESGCM(key)
    nonce = os.urandom(12)  # GCM 推荐使用 12 字节的 nonce

    # 2. 读取原始模型文件数据
    try:
        with open(input_file, 'rb') as f:
            plaintext = f.read()
    except FileNotFoundError:
        print(f"错误: 输入文件 '{input_file}' 未找到。")
        return

    # 3. 加密数据
    ciphertext = aesgcm.encrypt(nonce, plaintext, None) # 第三个参数是附加验证数据(AAD),这里我们不需要

    # 4. 将 nonce, tag 和密文写入输出文件
    # GCM 的 tag 会自动附加到密文的末尾,cryptography 库会自动处理
    # 我们只需要将 nonce 和加密结果(tag+ciphertext) 拼接起来
    with open(output_file, 'wb') as f:
        f.write(nonce)
        f.write(ciphertext) # ciphertext 已经包含了 tag

    # 5. 打印密钥和 nonce 以便在 JavaScript 中使用
    # 注意:在真实应用中,密钥管理非常重要!不要像这样直接打印和硬编码。
    # 这里只是为了演示。
    print("加密完成!")
    print(f"输入文件: {input_file}")
    print(f"输出文件: {output_file}")
    print("-" * 30)
    print("请将以下信息复制到你的 JavaScript 代码中:")
    # 将字节串转换为 JavaScript 中易于使用的 Hex 字符串
    print(f"密钥 (Key)  : {key.hex()}")
    # nonce 已经写入文件头部,JS会从文件中读取,所以这里不需要打印
    # print(f"Nonce (IV) : {nonce.hex()}")
    print("-" * 30)


if __name__ == '__main__':
    # --- 使用方法 ---
    # 将你的模型文件名放在这里
    input_model_file = 'model.glb'
    # 定义加密后的输出文件名
    encrypted_model_file = 'encrypted_model.enc'

    encrypt_file(input_model_file, encrypted_model_file)

如何使用这个脚本:

将 encrypt_model.py 和你的 model.glb 文件放在同一个文件夹中。

打开终端或命令行,进入该文件夹。

运行脚本:

python encrypt_model.py

脚本会生成一个 encrypted_model.enc 文件,并在终端打印出加密用的密钥(Key)请务必复制这个密钥,我们稍后在 HTML 文件中会用到它。


步骤 3: HTML 和 Three.js 显示代码

现在,创建 index.html 文件。我们将在这里编写前端逻辑。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Encrypted 3D Model Viewer</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
            font-family: monospace;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="info">正在加载和解密模型...</div>

    <!-- 引入 Three.js 库 -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://u...

点击查看剩余70%

{{collectdata}}

网友评论0