three.js能否对接REST API获取MSSQL数据以动态渲染3D模型？

当然可以实现这个需求，核心逻辑是通过后端REST API从MSSQL的dimensions表读取x/y/z参数，前端Three.js项目调用该API获取数据后，动态创建或更新3D模型。下面提供Node.js和SpringBoot两种技术栈的具体实现方案：

方案一：Node.js + Express 后端API #

1. 后端实现（Node.js + Express + mssql库） #

首先安装依赖：

npm install express mssql cors

编写API服务代码：

const express = require('express');
const sql = require('mssql');
const cors = require('cors');
const app = express();
const port = 3000;

// 启用CORS解决跨域问题
app.use(cors());

// MSSQL数据库连接配置
const dbConfig = {
    user: '你的数据库用户名',
    password: '你的数据库密码',
    server: '数据库服务器地址',
    database: '目标数据库名称',
    options: {
        trustServerCertificate: true, // 本地开发环境可开启
        encrypt: false // 本地MSSQL通常无需加密，Azure SQL需开启
    }
};

// 连接数据库并启动API服务
sql.connect(dbConfig)
    .then(pool => {
        console.log('成功连接到MSSQL数据库');

        // 定义获取尺寸参数的接口
        app.get('/api/dimensions', async (req, res) => {
            try {
                // 查询dimensions表的第一条数据（可根据业务调整查询逻辑）
                const result = await pool.request().query('SELECT TOP 1 x, y, z FROM dimensions');
                if (result.recordset.length === 0) {
                    return res.status(404).json({ error: '未找到尺寸参数' });
                }
                res.json(result.recordset[0]);
            } catch (err) {
                console.error('数据库查询失败:', err);
                res.status(500).json({ error: '获取参数失败' });
            }
        });

        app.listen(port, () => {
            console.log(`API服务运行在 http://localhost:${port}`);
        });
    })
    .catch(err => {
        console.error('数据库连接失败:', err);
    });

2. Three.js 前端调用 #

在你的Three.js项目中，通过fetch获取参数并渲染模型：

// 假设已完成Three.js基础场景、相机、渲染器的初始化
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载参数并渲染模型
async function loadAndRenderModel() {
    try {
        const response = await fetch('http://localhost:3000/api/dimensions');
        const dimensions = await response.json();

        // 使用从数据库获取的x/y/z创建立方体
        const geometry = new THREE.BoxGeometry(dimensions.x, dimensions.y, dimensions.z);
        const material = new THREE.MeshBasicMaterial({ color: 0x4287f5, wireframe: true });
        const cube = new THREE.Mesh(geometry, material);
        
        scene.add(cube);
        camera.position.z = 5;

        // 渲染场景
        renderer.render(scene, camera);
    } catch (err) {
        console.error('加载尺寸参数失败:', err);
    }
}

loadAndRenderModel();

方案二：SpringBoot 后端API #

1. 后端实现（SpringBoot + Spring Data JPA） #

首先在pom.xml中添加核心依赖：

<dependencies>
    <!-- Spring Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- Spring Data JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <!-- MSSQL驱动 -->
    <dependency>
        <groupId>com.microsoft.sqlserver</groupId>
        <artifactId>mssql-jdbc</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

配置application.properties：

# 数据库连接配置
spring.datasource.url=jdbc:sqlserver://你的数据库地址:1433;databaseName=目标数据库名称
spring.datasource.username=你的数据库用户名
spring.datasource.password=你的数据库密码

# JPA配置
spring.jpa.hibernate.ddl-auto=none
spring.jpa.show-sql=true

创建实体类Dimensions.java：

import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Table;

@Entity
@Table(name = "dimensions")
public class Dimensions {
    @Id
    private Long id; // 假设表中存在id主键字段
    private Double x;
    private Double y;
    private Double z;

    // 无参构造函数、Getter/Setter
    public Dimensions() {}

    public Double getX() { return x; }
    public void setX(Double x) { this.x = x; }
    public Double getY() { return y; }
    public void setY(Double y) { this.y = y; }
    public Double getZ() { return z; }
    public void setZ(Double z) { this.z = z; }
}

创建Repository接口：

import org.springframework.data.jpa.repository.JpaRepository;

public interface DimensionsRepository extends JpaRepository<Dimensions, Long> {
    // 查询第一条数据
    Dimensions findFirstByOrderByIdAsc();
}

创建API控制器：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "*") // 允许跨域请求
public class DimensionsController {
    private final DimensionsRepository repository;

    // 构造函数注入Repository
    public DimensionsController(DimensionsRepository repository) {
        this.repository = repository;
    }

    @GetMapping("/api/dimensions")
    public Dimensions getDimensions() {
        return repository.findFirstByOrderByIdAsc();
    }
}

2. Three.js 前端调用 #

和Node.js方案的前端代码基本一致，仅需修改API地址为SpringBoot默认端口：

async function loadAndRenderModel() {
    try {
        const response = await fetch('http://localhost:8080/api/dimensions');
        const dimensions = await response.json();

        const geometry = new THREE.BoxGeometry(dimensions.x, dimensions.y, dimensions.z);
        const material = new THREE.MeshBasicMaterial({ color: 0x4287f5, wireframe: true });
        const cube = new THREE.Mesh(geometry, material);
        
        scene.add(cube);
        camera.position.z = 5;
        renderer.render(scene, camera);
    } catch (err) {
        console.error('加载尺寸参数失败:', err);
    }
}

关键注意事项 #

• 跨域处理：如果前端和后端不在同一端口/域名下，必须在后端配置CORS（两种方案均已包含基础配置）。
• 数据校验：后端需确保返回的x/y/z参数不为空，前端要添加异常捕获逻辑，避免渲染失败。
• 多模型场景：若需加载多个模型的参数，可修改API返回参数数组，前端通过循环创建多个3D对象即可。

内容的提问来源于stack exchange，提问作者UsmanRazzaq