javascript - three.js のテクスチャ更新

Question

私の three.js プロジェクトでは、画像をクリックしてカラー テクスチャを変更しようとしています。

ここに私のコードがあります：

...

var col;

document.getElementById('image3').onclick = function() { 
col=("textures/synleder/synleder_COL.png");
};


var textures = {
            color: THREE.ImageUtils.loadTexture(col),
            normal: THREE.ImageUtils.loadTexture('textures/synleder/synleder_NRM.jpg'),
            specular: THREE.ImageUtils.loadTexture('textures/synleder/synleder_SPEC.jpg'),
    };


textures.color.wrapS = textures.color.wrapT = THREE.RepeatWrapping;
textures.color.repeat.set( 2, 2);
textures.normal.wrapS = textures.normal.wrapT = THREE.RepeatWrapping;
textures.normal.repeat.set( 2, 2);
textures.specular.wrapS = textures.specular.wrapT = THREE.RepeatWrapping;
textures.specular.repeat.set( 2, 2);


            var shader = THREE.ShaderLib[ "normalmap" ];
            var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

            uniforms[ "tNormal" ].value = textures.normal;
            uniforms[ "uNormalScale" ].value.y = 2;


        var material2 = new THREE.MeshPhongMaterial( {
                map: textures.color,
                specularMap: textures.specular,
                normalMap: uniforms[ "tNormal" ].value,
                normalScale: uniforms[ "uNormalScale" ].value,

            } );


            loader = new THREE.JSONLoader( true );
            document.body.appendChild( loader.statusDomElement );

            loader.load( "geo/kugel5.js", function( geometry ) { createScene( geometry, scale,  material2 ) } );


...

今まで試したことは、カラー テクスチャのパスを含む変数 col を定義したことです。image3 をクリックすると、ジオメトリに新しいカラー テクスチャが表示されます。残念ながら、うまくいきません。いくつかの調査の後、私はこのスレッドを見つけました: Three.js texture / image update at runtime

そして、テクスチャを更新するために何かを追加する必要があると思います:textures.color.needsUpdate=true;

しかし、これを次のようにコードに追加すると:

 document.getElementById('image3').onclick = function() { 
    col=("textures/synleder/synleder_COL.png");
    textures.color.needsUpdate=true;
    };

私のジオメトリが消えます。誰かが私が間違ったことの手がかりを持っていますか?

どうもありがとう！