3d 从文件重新加载纹理

我正在开发一个“实时图像编辑器”，在三个js中应用纹理

我的应用程序有两个部分，一个2D画布编辑器和一个3D模型，显示在2D部分完成的合成

您在二维零件中进行图像拼贴，将此合成保存在图像文件中，然后在三维模型中进行充电

我的问题是，当用户进行更改时，我无法重新加载图像文件。Yo可以进行第一次合成，并在3d模型中正确充电，但如果在合成中进行了另一次更改，请再次保存，然后尝试应用于3d模型，不会从文件中重新加载数据，并显示旧图像。如果加载另一个图像文件，则该文件工作正常，但使用相同的图像文件名（数据更改，但名称相同）时，不会显示真实数据

我的代码：

var cubeCamera, projector;
var texturas=[false,false,false];
var FAR = 1000;
var light, controls;
var SCREEN_WIDTH = _ANCHO3D = 380   ;
var SCREEN_HEIGHT = _ALTO3D = 340;
var container;
var camera, scene, projector, renderer;
var loader;
var composer;
var testParams, testPass;   
var tex, tex2, tex3;
var auxi=1;

$("#visor3D").append("<div id='conten3D' style='width:"+_ANCHO3D+"px; height:"+_ALTO3D+"px; border: 1px solid green;'></div>");

var clock = new THREE.Clock();
init();
animate();

function init() 
        {
    camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 900 );
    camera.position.set( -270, 45, 1 );

    // SCENE
    scene = new THREE.Scene();

    // LIGHTS                           
    var ambientLight = new THREE.AmbientLight(0xffffff,1.5);
        scene.add(ambientLight);                

    hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 1.5 );
    scene.add(hemiLight);

    renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer : true } );

    renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

    container=$("#conten3D");
    container.append(renderer.domElement);

    renderer.gammaInput = true;
    renderer.gammaOutput = true;

    // CONTROLS
    controls = new THREE.TrackballControls( camera, renderer.domElement );
            controls_set(); 

    loader = new THREE.OBJMTLLoader();
    loader.addEventListener('load', function ( event ) 
        {
        object = event.content;                 
        object.position.y = 44;                 
        object.scale.x =0.15;
        object.scale.y =0.15;
        object.scale.z =0.15;
        tex=new THREE.Texture();
        tex2=new THREE.Texture();
        tex3=new THREE.Texture();
                         object.children[11].material.map=THREE.ImageUtils.loadTexture( "obj/maps/blanco.jpg");
                object.children[10].material.map=THREE.ImageUtils.loadTexture( "obj/maps/blanco.jpg");
                object.children[6].material.map=THREE.ImageUtils.loadTexture( "obj/maps/blanco.jpg");
                object.children[8].material.map=THREE.ImageUtils.loadTexture( "obj/maps/blanco.jpg");       
                object.children[15].material.map=THREE.ImageUtils.loadTexture( "obj/maps/blanco.jpg");
                //aplicartexturas();
                scene.add( object );
                });

            loader.load( 'obj/demo.obj', 'obj/demo0.mtl' );

            }

        function animate() 
            {
            requestAnimationFrame( animate );
            render();
            rotar();
            }

        function render() 
            {
            tex.needsUpdate = true;
            tex2.needsUpdate = true;
            tex3.needsUpdate = true;
            var delta = clock.getDelta();
            controls.update( delta );
            renderer.render( scene, camera );
            }

function aplicartexturas()
{
tex=THREE.ImageUtils.loadTexture( "disenos/"+userid+"_LD.png" );
tex2=THREE.ImageUtils.loadTexture("disenos/"+userid+"_LI.png");
tex3=THREE.ImageUtils.loadTexture( "disenos/"+userid+"_BA.png" );
object.children[11].material.map=tex;
object.children[10].material.map=tex2;
object.children[6].material.map=tex3;
object.children[8].material.map=tex3;               
object.children[15].material.map=tex3;
}

var-cubeCamera，投影仪；
var texturas=[false，false，false]；
var-FAR=1000；
var灯，控制；
var屏幕宽度=ANCHO3D=380；
变量屏幕高度=\u ALTO3D=340；
var容器；
摄像机、场景、投影仪、渲染器；
var装载机；
var作曲家；
var testParams，testPass；
var-tex、tex2、tex3；
var-auxi=1；
$（“#visor3D”）。追加（“”）；
var clock=新的三个时钟（）；
init（）；
制作动画（）；
函数init（）
{
摄像机=新的三个透视摄像机（40，屏幕宽度/屏幕高度，1900）；
摄像机位置设置（-270,45,1）；
//场面
场景=新的三个。场景（）；
//灯光
var环境光=新的三个环境光（0xffffff，1.5）；
场景。添加（环境光）；
半球光=新的三个半球光（0xffffff，0xffffff，1.5）；
场景。添加（半光）；
renderer=new THREE.WebGLRenderer（{antialas:true，preserveDrawingBuffer:true}）；
设置大小（屏幕宽度、屏幕高度）；
容器=$（“#conten3D”）；
container.append（renderer.domeElement）；
renderer.gammaInput=true；
renderer.gammaOutput=true；
//控制
控件=新的三个轨迹球控件（camera、renderer.DoElement）；
控制_集（）；
loader=new THREE.OBJMTLLoader（）；
loader.addEventListener（'load'，函数（事件）
{
object=event.content；
object.position.y=44；
object.scale.x=0.15；
object.scale.y=0.15；
object.scale.z=0.15；
tex=新的三点纹理（）；
tex2=新的三点纹理（）；
tex3=新的三点纹理（）；
object.children[11].material.map=THREE.ImageUtils.loadTexture（“obj/maps/blanco.jpg”）；
object.children[10].material.map=THREE.ImageUtils.loadTexture（“obj/maps/blanco.jpg”）；
object.children[6].material.map=THREE.ImageUtils.loadTexture（“obj/maps/blanco.jpg”）；
object.children[8].material.map=THREE.ImageUtils.loadTexture（“obj/maps/blanco.jpg”）；
object.children[15].material.map=THREE.ImageUtils.loadTexture（“obj/maps/blanco.jpg”）；
//aplicartexturas（）；
场景。添加（对象）；
});
loader.load（'obj/demo.obj'，'obj/demo0.mtl'）；
}
函数animate（）
{
请求动画帧（动画）；
render（）；
rotar（）；
}
函数render（）
{
tex.needsUpdate=true；
tex2.needsUpdate=true；
tex3.needsUpdate=true；
var delta=clock.getDelta（）；
控制。更新（增量）；
渲染器。渲染（场景、摄影机）；
}
函数aplicartexturas（）
{
tex=THREE.ImageUtils.loadTexture（“disenos/”+userid+“\u LD.png”）；
tex2=THREE.ImageUtils.loadTexture（“disenos/”+userid+“_LI.png”）；
tex3=THREE.ImageUtils.loadTexture（“disenos/”+userid+“_BA.png”）；
object.children[11].material.map=tex；
object.children[10].material.map=tex2；
object.children[6].material.map=tex3；
object.children[8].material.map=tex3；
object.children[15].material.map=tex3；
}

当对对象充电时，我会对所有对象应用白色纹理 稍后，当我在2d编辑器中进行更改时，我会使用函数“aplicartexturas（）”应用这些更改。在这个函数中，“userid”是页面中的一个全局变量，用于不同的多用户访问

---

谢谢。

以下是工作代码：

        var cubeCamera, projector;
        var texturas=[false,false,false];
        var FAR = 1000;
        var light, controls;
        var SCREEN_WIDTH = _ANCHO3D = 380   ;
        var SCREEN_HEIGHT = _ALTO3D = 340;
        var container;
        var camera, scene, projector, renderer;
        var loader;
        var composer;
        var testParams, testPass;   
        var tex, tex2, tex3;
        var auxi=1;

        $("#visor3D").append("<div id='conten3D' style='width:"+_ANCHO3D+"px; height:"+_ALTO3D+"px; border: 1px solid green;'></div>");
        var clock = new THREE.Clock();
        init();
        animate();

        function init() 
            {
            camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 900 );
            camera.position.set( -270, 45, 1 );

            // SCENE
            scene = new THREE.Scene();

            // LIGHTS                           
            var ambientLight = new THREE.AmbientLight(0xffffff,1.5);
            scene.add(ambientLight);                

            hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 1.5 );
            scene.add(hemiLight);

            renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer : true } );

            renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

            container=$("#conten3D");
            container.append(renderer.domElement);

            renderer.gammaInput = true;
            renderer.gammaOutput = true;

            // CONTROLS
            controls = new THREE.TrackballControls( camera, renderer.domElement );
            controls_set(); 

            loader = new THREE.OBJMTLLoader();
            loader.addEventListener('load', function ( event ) 
                {
                object = event.content;                 
                object.position.y = 44;                 
                object.scale.x =0.15;
                object.scale.y =0.15;
                object.scale.z =0.15;

                tex=new THREE.Texture();
                tex2=new THREE.Texture();
                tex3=new THREE.Texture();

                var blanco=new THREE.ImageUtils.loadTexture( "obj/maps/blanco.jpg");
                object.children[11].material.map=blanco;
                object.children[10].material.map=blanco;
                object.children[6].material.map=blanco;
                object.children[8].material.map=blanco;
                object.children[15].material.map=blanco;                    

                scene.add( object );
                });

            loader.load( 'obj/demo.obj', 'obj/demo0.mtl' );

            }

        function animate() 
            {
            requestAnimationFrame( animate );
            render();
            }

        function render() 
            {
            var delta = clock.getDelta();
            controls.update( delta );
            renderer.render( scene, camera );
            }




function aplicartexturas()
{   
tex2=THREE.ImageUtils.loadTexture("disenos/"+userid+"_LI.png", null, function(){
    object.children[10].material.map=tex2;
    });
tex=THREE.ImageUtils.loadTexture("disenos/"+userid+"_LD.png", null, function(){
    object.children[11].material.map=tex;
    });
tex3=THREE.ImageUtils.loadTexture("disenos/"+userid+"_BA.png", null, function(){
    object.children[6].material.map=tex3;
    object.children[8].material.map=tex3;
    object.children[15].material.map=tex3;
    });

object.children[10].material.map=new THREE.ImageUtils.loadTexture("disenos/"+userid+"_LI.png");
object.children[11].material.map=new THREE.ImageUtils.loadTexture( "disenos/"+userid+"_LD.png");
object.children[6].material.map=new THREE.ImageUtils.loadTexture( "disenos/"+userid+"_BA.png");
object.children[8].material.map=new THREE.ImageUtils.loadTexture( "disenos/"+userid+"_BA.png");
object.children[15].material.map=new THREE.ImageUtils.loadTexture( "disenos/"+userid+"_BA.png");
render();
}

我认为这不是很理想

如果你知道一个更好或最佳的方法来正确地做它，请张贴它

---

答案到此为止。

尝试以下操作：（1）从渲染循环中删除

needsUpdate=true

，

loadTexture

为您设置该标志。（2） 加载是异步的。加载后，在

loadTexture

回调中指定新加载的纹理。（3） 白色纹理可以共享。不需要多次加载。谢谢您的回答。这就是问题所在吗？如果是的话，我会发布一个答案。谢谢你的回答。我删除了

needsUpdate=true

（1），现在我使用一个变量加载白色纹理，并将这个变量指定给所有贴图（2）。但这很奇怪，我在callback

tex2=THREE.ImageUtils.loadTexture（“disenos/”+userid+“_LI.png”，null，function（）{object.children[10].material.map=tex2；}）中分配了新加载的纹理并且没有任何变化；还可以尝试将新加载的纹理直接指定给map
object.children[10].material.map=new THREE.ImageUtils.loadTexture（“disenos/”+userid+“_LI.png”）和没有发生任何事情，但如果我同时做这两件事，它就会工作。再次感谢。如果你需要进一步的帮助，你将不得不发布一个简单的实例来演示这个问题。
tex2=THREE.ImageUtils.loadTexture("disenos/"+userid+"_LI.png", null, function(){
    object.children[10].material.map=tex2;
    });

object.children[10].material.map=new THREE.ImageUtils.loadTexture("disenos/"+userid+"_LI.png");