three.js needsUpdate 方法 - 可爱的黑精灵 - 博客园 (cnblogs.com)

ThreeJS源码

THREE.Texture.prototype = {
    constructor: THREE.Texture,
    set needsUpdate( value ) {      // value = true;
        if ( value === true ) this.version ++;  //this.version ++ 变为了1;
    }
}

THREE.WebGLTextures = function ( _gl, extensions, state, properties, capabilities, paramThreeToGL, info ) {
    //  参数`texture`就是前面的`THREE.Texture`
    function setTexture2D( texture, slot ) {
        // 这里 `texture.version = 1`
        if ( texture.version > 0 && textureProperties.__version !== texture.version ) {
            // 替换图片
            var image = texture.image;
            uploadTexture( textureProperties, texture, slot );
            return;
        }
    }
}

function setProgram( camera, scene, material, object ) {
    ...
    if ( material.version === materialProperties.__version ) { //这里涉及到更新
    ...
}

涉及shader的#ifdefine

添加和删除灯光

这个应该还是在场景中比较常见了的吧，可能很多刚开始用three.js的人都会掉进这个坑里，在给场景动态添加了一个灯光后发现这个灯光怎么不起作用，不过这是在用three.js内置的shader的情况下，例如phong, lambert，看renderer里的源代码就会发现three.js在内置的shader代码中使用#define来设置场景中灯光的个数，而这个#define的值是在每次更新材质的时候通过字符串拼接shader得到，代码如下

"#define MAX_DIR_LIGHTS " + parameters.maxDirLights,
"#define MAX_POINT_LIGHTS " + parameters.maxPointLights,
"#define MAX_SPOT_LIGHTS " + parameters.maxSpotLights,
"#define MAX_HEMI_LIGHTS " + parameters.maxHemiLights,

改变纹理

原来材质使用了纹理，后来不使用了，或者原来材质不使用纹理后来又加上去了，如果不手动强制更新材质都会导致最后出来的效果跟自己想的不一样，产生这种问题的原因跟上面添加灯光差不多，也是因为shader中加了一个宏来判断是否使用了纹理，

parameters.map ? "#define USE_MAP" : "",
parameters.envMap ? "#define USE_ENVMAP" : "",
parameters.lightMap ? "#define USE_LIGHTMAP" : "",
parameters.bumpMap ? "#define USE_BUMPMAP" : "",
parameters.normalMap ? "#define USE_NORMALMAP" : "",
parameters.specularMap ? "#define USE_SPECULARMAP" : "",

ThreeJS needsupdate

ThreeJS源码

涉及shader的#ifdefine

添加和删除灯光

改变纹理