Hi all, i work on computed fluid dynamics rendering web application.
From Paraview to html, I load fbx file, i can hide/show the geometry with “dat.GUI”.
I add the wireframe function too, but i loose the vertex colors of the mesh by the application of “THREE.MeshStandardMaterial”.
Do you kown if is possible to apply a wireframe function without recolorized the mesh ?
When setting Material.wireframe to true, the renderer internally generates new index attribute for rendering the lines of the wireframe. However, vertex colors are retained like demonstrated in the following fiddle:
https://jsfiddle.net/vrdcgL1o/
If you apply a new material to your mesh, it’s important to set the vertexColors property to THREE.VertexColors like in the demo. Maybe you have overlooked that…
Hello, thanks for your answer, but i have always the same result, wirefrme is true and ok in the rendering.
But i lost all vertexcolors. replaced by the material.
script
Actual script:
var streamlines = new THREE.FBXLoader();
streamlines.load( 'cp3650.fbx', function (object ) {
object.traverse( function ( child ) {
if( child.material ) {
child.material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
wireframe: true,
vertexColors: THREE.VertexColors
} );
}
});
scene.add(object);
} );
Can you please share cp3650.fbx in this thread?
I hope you can download the file
It seems your FBX file has no vertex colors. I’ve traversed through the loaded object and only the following geometry is detected:
Normally, there should be a color attribute.
Ok thanks, i have colors on the FBX file when i load it, but if is not a vertex colors, what is the type of the colors attributes ?
See the rendering only with :
streamlines.load( ‘cp3650.fbx’, function ( streamobj )…
There are just multiple materials applied on the mesh. If you inspect the BufferGeometry, you will see that groups are defined. They create in some sense a mapping of materials to certain parts of the geometry.
When you say ‘inspect’ what software do you use to see the BufferGeometry properties ?
Then you thinks is possible to change these groups of material and add a wireframe rendering ?
I found another of you post about wireframe, that’s better but no vertexcolors on wireframe.
object.traverse(function (child) {
if ( child.isMesh ) {
var wireframeGeomtry = new THREE.WireframeGeometry( child.geometry );
var wireframeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
var wireframe = new THREE.LineSegments( wireframeGeomtry, wireframeMaterial );
child.add(wireframe);
}
});
I’m just using the Chrome developer tools and then inspect the geometry within the debugger.
Please try the following code in your onLoad() callback before adding the FBX object to your scene:
object.traverse( ( child ) => {
if ( child.material ) {
for ( let material of child.material ) {
material.wireframe = true;
}
}
} );
You have to iterate over all materials and set wireframe to true. The result looks like so:
Woo that’s great, many thanks for the help.
Is very impressive !!
Now i can apply dat.GUI to show/no show the wireframe or the solid rendering.
Finally, this method depends on the build of the FBX.
My second test with a simple code worked perfectly:
var streamlines = new THREE.FBXLoader();
streamlines.load( 'streamlines.fbx', function ( streamobj ) {
streamobj.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.wireframe = true;
}
} );
