从文件重新加载纹理

时间：2013-11-18 09:18:12

标签： 3d three.js

我正在使用“实时图像编辑器”来应用三个js中的纹理。

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

您在2d部分进行图像拼贴，将此合成保存在图像文件中，然后在3d模型中进行充电。

我的问题是，当用户进行更改时，我无法重新加载图像文件。哟可以做第一个合成并在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;
}

当充电对象时，我对所有人应用白色纹理 后来，我在2d编辑器中做了更改，我在功能“aplicartexturas（）”中进行了这些更改。在此函数中，“userid”是页面中的全局变量，用于区分多个用户访问。

感谢。

1 个答案:

答案 0 :(得分：0)

以下是工作代码：

        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();
}

使用此代码，当我调用函数aplicartexturas()时，应用程序将从三个不同的图像文件重新加载数据并将其显示为“实时”，而无需重新加载所有3d对象。

奇怪的是，需要两种不同的负载和分配才能工作：

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");

我认为这不是最佳选择。

如果您知道更好或更好的方法，请发布。

全部解决问题。

相关问题
最新问题