render in wireframe

[phatpixels]

Hi All,

Is there a way to display the model in simple wireframe view? say switch modes from fully textured to simple wireframe to see model construction. Thanks.

[WadeMorrison]

Hey there! I think to get the desired result you'll need to use the addPass() in the Custom Effects section of the Post Processing Effects. Hope that helps!

[phatpixels]

Thanks for the reply @WadeMorrison, I could be wrong but isn't that just a grid shader not the wireframe view that I was after? I'm not after an effect but the real wireframe view of the 3d model is that possible in M-V?

[NicoPennec]

Hi @phatpixels !

Three.js has a wireframe option on the MeshStandardMaterial.
This feature is not supported out-of-the-box by Model-Viewer, but you can access it as explained in the FAQ.

I just added a wireframe rendering mode to my current project (see the source code of Kitsu)

To reach this goal, I create a new material variant from my 3D model (see createMaterialInstanceForVariant(...) )
Then I enable the wireframe option to each material of my variant, and I apply the gray color to the wire (but it's optional).
Finally I swap to the variant in Model-Viewer (see doc)

The result:

[core-hacked]

Edit: I was just stupid, you can hook it and use scene.traverse as you would with threejs. Sorry..

var mvElement = document.getElementById("mv-element");
              var scene =
                mvElement[
                  Object.getOwnPropertySymbols(mvElement).find(
                    (e) => e.description === "scene"
                  )
                ];

              // traverse the scene and set wireframe to true
              scene.traverse(function (child) {
                if (child.isMesh) {
                  child.material.wireframe = true;
                  child.material.color.setHex(0xff0000); // sets color
                }
              });

Hi @ phatpixels !

Three.js has a wireframe option on the MeshStandardMaterial. This feature is not supported out-of-the-box by Model-Viewer, but you can access it as explained in the FAQ.

I just added a wireframe rendering mode to my current project (see the source code of Kitsu)

To reach this goal, I create a new material variant from my 3D model (see createMaterialInstanceForVariant(...) ) Then I enable the wireframe option to each material of my variant, and I apply the gray color to the wire (but it's optional). Finally I swap to the variant in Model-Viewer (see doc)

The result:

Hi, I was wondering if you could provide the code example of that, as either I am too stupid to figure it out or I am missinterpreting what you wrote.

[Sembiance]

This works great! Thanks! One tip, the wireframe won't switch until the user interacts with the model (or if it's already animating). So to get it to switch to wireframe right away and re-draw, call: mvElement.updateFraming()

[elalish]

Even better is scene.queueRender();

[RomainMazB]

I started with @NicoPennec answers but figured out that while it was working as expected at the first glance.
If you look the wires colors in details, they are affected by the texture:

Then I discovered that you can basically disable the material texture using the map option of Three.js .

Here is the final code to create the wireframe variant, based on the source code of Kitsu already linked above:

createWireframeVariant(model) {
    const maxIndex = model.materials.length
    for (let i = 0; i < maxIndex; i++) {
        const variantMaterial = model.createMaterialInstanceForVariant(
            i,
            `material-wireframe-${i}`,
            'variant-wireframe',
            this.isWireframe
        )
        if (!variantMaterial) {
            continue
        }
        const texture = variantMaterial.normalTexture
        const materialsSymbol = Object.getOwnPropertySymbols(texture).find(
            symbol => symbol.description === 'materials'
        )
        const materials = texture[materialsSymbol]
        materials.forEach(material => {
            material.wireframe = true // Enable the wireframe
            material.map = false // Disable the texture
        })
    }
}

The final result:

[IorHon]

Its posible to see only the edges? Like CAD view?