threex.geometricglow is a three.js extension to make any object glow at geometric level. It is done at the geometry level. An important feature which provide multiple advantages.

    • the 'glow' is a mesh. so you can add it in your scene whenever you want.
    • It isnt in screenspace. so simpler to handle and easier to tune
      • screenspace glow may have a single glow level no matter the depth of the glowing object.

    It is released under MIT License.




    • dilation fails: seems to fails on eroded cube
    • formula for dot()
      • fix viewVector is false... better to take vector from vertex to camera


    Try this Geometric Glow Mesh and its source. It will shows you how to build a geometric glow mesh. It depends on threex.atmospherematerial.js and threex.dilategeometry.js. How to create a glowMesh for a mesh ? just like this.

    var glowMesh	= new THREEx.GlowMesh(mesh);

    example of customization of the default glowMesh

    var insideUniforms	= glowMesh.insideMesh.material.uniforms
    var outsideUniforms	= glowMesh.outsideMesh.material.uniforms

    to help fine tuning you may use dat.gui helpers.

    var datGUI	= new dat.GUI()
    new THREEx.addAtmosphereMaterial2DatGui(glowMesh.insideMesh.material, datGUI)	
    new THREEx.addAtmosphereMaterial2DatGui(glowMesh.outsideMesh.material, datGUI)	


    It dilates a geometry along the vertex normals. Note that it isnt to be confused with object3d.scale. Scale changes the size but independantly of the vertex normal. Try this example and its source. It shows how to dilate/erode a geometry. To dilate a geometry by 5%, just do

    THREEx.dilateGeometry(geometry, 0.05)


    It provides a material which shine on border, like the earth atmostphere when you look at it from space. To create it, use the following line.

    var material	= THREEx.createAtmosphereMaterial()

    It is a THREE.ShaderMaterial that you can tune thru its uniforms. Here is a possible customisation.

    material.uniforms.glowColor.value	= new THREE.Color('cyan')
    material.uniforms.coeficient.value	= 1.1
    material.uniforms.power.value		= 0.7
    For fine tuning, you can use datGUI
    var datGUI	= new dat.GUI()
    new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)


    🚀 Github 镜像仓库 🚀




    贡献者 1

    J Jerome Etienne @Jerome Etienne


    • JavaScript 96.8 %
    • Makefile 3.2 %