如何从被 GLSL 着色器置换的 Three.js 几何图形中导出 OBJ? [英] How Do I Export OBJ From Three.js geometry that is being displaced by GLSL shader?

问题描述

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

I attempted to use the following code I found on Stack Overflow to export an OBJ from geometry in a Three.js scene. The geometry is being displaced by a GLSL shader so the displacement of vertices doesn't seem to export with the geometry. When I import the OBJ into Blender I only get the flat plane that is not displaced. You can inspect a working version of the displacement at http://kineticvideo.co

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

How do I export an OBJ while using a GLSL shader to displace the geometry? Please help. I was under the impression the displacement of the vertices would actually be updated in the Three.js geometry in real time, but instead it seems like even though I set geometry.verticesNeedUpdate = true; the displacement is actually happening in the mesh and not the geometry.

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

If so, how do I export an OBJ using from the mesh and not the geometry?

来自 Three.js 的一段代码片段，用于声明几何和顶点着色器:

A code snippet from the Three.js that declares the geometry and vertex shader:

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 );

这是我使用的函数，它确实导出几何，但不是位移:

This is the function I used which does export the geometry, but not the displacement:

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 + '
';
}

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+= '
';
}

return s;
console.log(s);
}

推荐答案

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

My mistake was googling this, rather than running a grep in the Three.js repo. There all sorts of functions in there to use, two of them being THREE.STLExporter and THREE.OBJExporter.

THREE.STLExporter 似乎是两者中更强大的一个，它允许您遍历场景并导出场景中的网格.您还可以导出单个网格.虽然我没有 OBJ，但 STL 对我来说已经足够了.

THREE.STLExporter seems to be the more robust of the two, allowing you to traverse a scene and export meshes in the scene. You can also export a singular mesh. While I don't get an OBJ, a STL is fine for my purposes.

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

但这只是部分回答了最初的问题，因为置换的网格仍然没有导出.我得到的只是原来的飞机.

But this only partially answers the the original question, because well the displaced mesh still doesn't export. All I get is the original plane.

这篇关于如何从被 GLSL 着色器置换的 Three.js 几何图形中导出 OBJ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！