README.md

    threex.geometricglow

    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.

    Notes

    Examples

    bugs

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

    threex.geometricglowmesh.js

    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);
    mesh.add(glowMesh)

    example of customization of the default glowMesh

    var insideUniforms	= glowMesh.insideMesh.material.uniforms
    insideUniforms.glowColor.value.set('hotpink')
    var outsideUniforms	= glowMesh.outsideMesh.material.uniforms
    outsideUniforms.glowColor.value.set('hotpink')

    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)	

    threex.dilategeometry.js

    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)

    threex.atmospherematerial.js

    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
    
    ```javascript
    var datGUI	= new dat.GUI()
    new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/jeromeetienne/threex.geometricglow

    发行版本

    当前项目没有发行版本

    贡献者 1

    J Jerome Etienne @Jerome Etienne

    开发语言

    • JavaScript 96.8 %
    • Makefile 3.2 %