I tried using a code snippet from Stack Overflow to export an OBJ file from geometry in a Three.js scene. The issue I'm facing is that the geometry, which has been displaced by a GLSL shader, does not seem to export with the displacement of vertices. When I import the OBJ file into Blender, only the flat plane without any displacement shows up. You can view a working version of the displacement effect at
Can anyone guide me on how to properly export an OBJ file while using a GLSL shader for vertex displacement? I initially thought that the vertex displacement would be reflected in real-time in the Three.js geometry, but it appears that even though I set geometry.verticesNeedUpdate = true;, the displacement is happening within the mesh and not the geometry itself.
If that's the case, what steps should I take to export an OBJ from the mesh instead of the geometry?
Here is a snippet of code from Three.js that defines 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 );
Below is the function I used to export the geometry, however, it does not include the displacement information:
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);
}