hujiulong / vue-3d-model

📷 vue.js 3D model viewer component
https://vue-3d-model.netlify.app
MIT License
2.48k stars 472 forks source link

Smoothing STL Model #134

Open giuliobrugnaro opened 4 years ago

giuliobrugnaro commented 4 years ago

I am using the model-stl component to display STL files. For most of them, their "resolution" is quite low (due to conversion) and they have segmented corners instead of smooth round ones (see attached screenshot). Is there a way to smooth the STL model during the visualization? I know there is the 'smoothing' prop for OBJ models. Thanks!

stl

giuliobrugnaro commented 4 years ago

@hujiulong is flatShading false by default for the model-stl? Could it be a way to achieve the smoothing for STL files? If so, could you indicate me where I can change this option? Thanks!

giuliobrugnaro commented 4 years ago

Hi @hujiulong , do you have any suggestions for me? I haven't managed yet to figure out how to address the issue ;/

hujiulong commented 4 years ago

This rendering result is because the geometry has no normals, you can choose to bring the normal information when exporting the model, Or, like the smooth prop of obj-model, recalculate the normals.

giuliobrugnaro commented 4 years ago

Thank you @hujiulong. I have tried to replicate what happens for the smooth prop of obj-model in the stl-model component (see below), but the result is even weirder (see picture). Am I missing something?

methods: {
    getObject(geometry) {
    geometry = toIndexed(geometry);
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    return new Mesh(geometry, new MeshPhongMaterial());
    },
  },

Capture2

This is the results with only geometry = toIndexed(geometry);

Capture3

giuliobrugnaro commented 4 years ago

@hujiulong I have modified the getObject function in the model-stl component as below but unfortunately the result is still similar to the previous images. Do you have any suggestion? I'm stuck and not sure what to try next. Thank you!

    getObject(geometry) {

    geometry = new Geometry().fromBufferGeometry( geometry );
    geometry.mergeVertices();
    geometry.computeVertexNormals();
    geometry.computeFaceNormals();
    geometry = new BufferGeometry().fromGeometry( geometry );

    return new Mesh(geometry, new MeshPhongMaterial());
    },