Javascript 如何从GLSL着色器替换的Three.js几何体导出OBJ?
我尝试使用在Stack Overflow上找到的以下代码从Three.js场景中的几何体导出OBJ。几何体被GLSL着色器置换,因此顶点置换似乎不会随几何体一起导出。当我将OBJ导入混合器时,我只得到没有位移的平面。您可以随时检查位移的工作版本 如何在使用GLSL着色器置换几何体时导出OBJ?请帮忙。我的印象是,在Three.js geometry中,顶点的位移实际上会实时更新,但实际上,即使我将geometry.verticesNeedUpdate设置为true,它似乎也会更新;位移实际上发生在网格中,而不是几何体中 如果是,如何使用网格而不是几何体导出OBJ Three.js中声明几何体和顶点着色器的代码片段:Javascript 如何从GLSL着色器替换的Three.js几何体导出OBJ?,javascript,3d,three.js,glsl,webgl,Javascript,3d,Three.js,Glsl,Webgl,我尝试使用在Stack Overflow上找到的以下代码从Three.js场景中的几何体导出OBJ。几何体被GLSL着色器置换,因此顶点置换似乎不会随几何体一起导出。当我将OBJ导入混合器时,我只得到没有位移的平面。您可以随时检查位移的工作版本 如何在使用GLSL着色器置换几何体时导出OBJ?请帮忙。我的印象是,在Three.js geometry中,顶点的位移实际上会实时更新,但实际上,即使我将geometry.verticesNeedUpdate设置为true,它似乎也会更新;位移实际上发生
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);
}
THREE.saveGeometryToObj=函数(几何体){
var s='';
对于(i=0;i
我的错误是用谷歌搜索,而不是在Three.js repo中运行grep。这里有各种各样的函数可以使用,其中两个是THREE.STLExporter和THREE.OBJExporter
THREE.STLExporter似乎是这两者中更健壮的一个,它允许您遍历场景并导出场景中的网格。也可以导出单个网格。虽然我没有得到OBJ,但STL对我来说很好
var exportSTL = new THREE.STLExporter;
exportSTL.exportMesh(mesh);
但这只是部分回答了原始问题,因为置换的网格仍然无法导出。我得到的只是原始平面。您需要像在顶点着色器中一样修改这些顶点。这可能很棘手,因为您需要跟踪哪些属性附加到顶点,但基本上您从着色器应用相同的数学
geometry.verticesNeedUpdate=true
会将新的顶点位置发送到GPU,而不是CPU。位移仅发生在GPU上。您必须在导出函数中复制相同的置换逻辑。我不确定这是否可行。顶点穿过顶点着色器,并在其位置进行修改。每一帧。请看这里:可能的想法是在顶点着色器中写入一些数据,将其传递到片段着色器,然后在那里执行一些操作,将置换值渲染到高度贴图或其他内容中,我没有任何线索,抱歉!