【问题标题】:How Do I Export OBJ From Three.js geometry that is being displaced by GLSL shader?如何从被 GLSL 着色器置换的 Three.js 几何体中导出 OBJ?
【发布时间】:2026-02-20 08:15:01
【问题描述】:

我尝试使用在 Stack Overflow 上找到的以下代码从 Three.js 场景中的几何图形导出 OBJ。几何体正在被 GLSL 着色器置换,因此顶点的置换似乎不会随几何体一起导出。当我将 OBJ 导入 Blender 时,我只得到没有移位的平面。您可以在http://kineticvideo.co 处检查位移的工作版本

如何在使用 GLSL 着色器置换几何体时导出 OBJ?请帮忙。我的印象是顶点的位移实际上会在 Three.js 几何体中实时更新,但看起来即使我设置了 geometry.verticesNeedUpdate = true;位移实际上发生在网格中,而不是几何体中。

如果是这样,我如何使用网格而不是几何体导出 OBJ?

Three.js 中声明几何和顶点着色器的代码 sn-p:

videoMaterial = new THREE.ShaderMaterial( {
    uniforms: {
        "tDiffuse": { type: "t", value: texture },
        "multiplier":  { type: "f", value: 66.6 },
        "displace":  { type: "f", value: 33.3 },
        "opacity":  { type: "f", value: 1.0 },
        "originX":  { type: "f", value: 0.0 },
        "originY":  { type: "f", value: 0.0 },
        "originZ":  { type: "f", value: -2000.0 }
    },

    vertexShader: RuttEtraShader.vertexShader,
    fragmentShader: RuttEtraShader.fragmentShader,
    depthWrite: true,
    depthTest: true,
    wireframe: false, 
    transparent: true,
    overdraw: false

});
videoMaterial.renderToScreen = true;
videoMaterial.wireframe = true;
geometry = new THREE.PlaneGeometry(720, 360, 720, 360);
geometry.overdraw = false;
geometry.dynamic = true;
geometry.verticesNeedUpdate = true;

mesh = new THREE.Mesh( geometry, videoMaterial );

这是我使用的函数,它导出几何体,但不导出位移:

THREE.saveGeometryToObj = function (geometry) {
var s = '';
for (i = 0; i < geometry.vertices.length; i++) {
    s+= 'v '+(geometry.vertices[i].x) + ' ' +
    geometry.vertices[i].y + ' '+
    geometry.vertices[i].z + '\n';
}

for (i = 0; i < geometry.faces.length; i++) {

    s+= 'f '+ (geometry.faces[i].a+1) + ' ' +
    (geometry.faces[i].b+1) + ' '+
    (geometry.faces[i].c+1);

    if (geometry.faces[i].d !== undefined) {
        s+= ' '+ (geometry.faces[i].d+1);
    }
    s+= '\n';
}

return s;
console.log(s);
}

【问题讨论】:

  • geometry.verticesNeedUpdate = true 导致将新的顶点位置发送到 GPU,而不是 CPU。位移仅发生在 GPU 上。您必须在导出函数中复制相同的置换逻辑。

标签: javascript 3d three.js glsl webgl


【解决方案1】:

您需要像在顶点着色器中那样修改这些顶点。这可能很棘手,因为您需要跟踪哪些属性附加到顶点,但基本上您从着色器应用相同的数学。

【讨论】:

    【解决方案2】:

    我的错误是在 Google 上搜索,而不是在 Three.js 存储库中运行 grep。里面有各种各样的函数可以使用,其中两个是 THREE.STLExporter 和 THREE.OBJExporter。

    THREE.STLExporter 似乎是两者中更强大的一个,允许您遍历场景并导出场景中的网格。您还可以导出单个网格。虽然我没有 OBJ,但 STL 对我的目的来说很好。

    var exportSTL = new THREE.STLExporter;
    exportSTL.exportMesh(mesh);
    

    但这只是部分回答了最初的问题,因为位移的网格仍然没有导出。我得到的只是原来的飞机。

    【讨论】:

    • 好吧,我不确定这是否可能。顶点全部通过顶点着色器并在其位置进行修改。每一帧。可能在这里看到:*.com/questions/9350239/… 可能的想法也是在顶点着色器中写入一些数据,将其传递给片段着色器,也许在那里做一些事情,将位移值渲染成高度图或其他东西,我不知道,对不起!