如何从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 + '\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);
}
推荐答案
我的错误是谷歌搜索,而不是在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屋!