three.js needsUpdate 方法

本篇介绍Material类中的needsUpdate方法。Geometry中类似的update方法可以类推。

问题提出

function render() { ???????material.map = canvasMap; ???material.map.needsUpdate = true; ???}

我想实时的更新材质(material)的贴图(map)，所以我在render函数中为material赋值并将needsUpdate设为true。
后来跑着跑着页面挂了，我发现这个赋值操作很占GPU，我在找解决方案的时候发现这玩意不需要赋值操作！！！

needsUpdate设为true它会实时的检测贴图是否更新，并更新贴图。

needsUpdate

step1

首先转跳到three.js中

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

step2

这个version = 1有什么用我们继续看
由于是Texture 调用了WebGLTextures。

THREE.WebGLTextures = function ( _gl, extensions, state, properties, capabilities, paramThreeToGL, info ) { ???????}

接着我们发现WebGLTextures中setTexture2D setTextureCube这两个函数用到了version所以我们先看setTexture2D。

• setTexture2D() 删减版

 ???????// ?参数`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; ???????????} ???????}

• uploadTexture() 用来更新纹理

three.js needsUpdate 方法

原文地址：https://www.cnblogs.com/chenjy1225/p/9640570.html