Subdivision surfaces with three.js


Subdivision surfaces are a technique for transforming a lower polygon model into a more detailed model. The algorithm subdivides each face in a model into smaller faces, while maintaining the same approximate surface. The advantage when using subdivision surfaces are that the modeler can continue to work with the less detailed model. This makes the process easier since it is less to keep track of for the modeler. Then when complete, the modeler can “bake” in the subdivisions to create a more detailed model.

More Info on Subdivision Surfaces – Wikipedia


When dealing with large JSON models in three.js they can get large in file size. This is because they need to store data for every vertex and face in the model. For example, my Mr. Bird model was about 4.8 megs. However, by using subdivision surfaces a smaller low poly model could be sent. (reducing loading times) Then once the model is loaded a more detailed model could be created using subdivisions.


For an example I modeled a very simple flashlight in Blender. When exporting to the three.js JSON model format the file checks in at 12k. Now that is more like it! By adding more subdivisions the flashlight geometry becomes more complex even though the model is still based on the original low poly geometry. Cool!



Making this all happen is pretty easy. Getting the latest version of three.js should contain a new modifier called SubdivisionModifier. Once the model is loaded the subdivision modifier can be applied and the result will be a more detailed mesh.


For complex scenes subdivision surfaces give the ability to only send the “blueprint” of a mesh over the wire and let three.js do the heavy lifting. This technique should give users less time with lame preloading and more time with awesome webgl interactions.


  • Hey, great blog and some very helpful tutorials on here. I have just started experimenting with ThreeJS, learning the basics.

    Does this script add the slider box as well, im guessing not?

  • It very interesting. But it seems that you have a whole part in your Threejs file that is not in the file released on gitHub.

    (the part begins with

    THREE.SubdivisionModifier=function(a){this.subdivisions=a===void 0?1:a;this.useOldVertexColors=!1;this.supportUVs=!0};THREE.SubdivisionModifier.prototype.constructor=THREE.Subdivisio …)

    So I tried it with the gitHub version, and I have a nice

    TypeError: THREE.SubdivisionModifier is not a constructor @ http://localhost/Ressources-Logiciels/ThreeJS/004-smoothing/004.html:37

    :/ Can you explain where you found this code, or did you do it yourself? Or maybe it has been removed after your blog post?

  • @pag yeah it’s kind of goofy. The extra add-ons for three.js are sometimes located in the examples section of the repo. three.js / examples / js / modifiers / SubdivisionModifier.js

    I think at one point that code was in the main area but has since been abstracted out.

Leave a Reply

Your email address will not be published. Required fields are marked *