How can I change the texture in a Blender model loaded into three.js, after it's been loaded, with ImageUtils.loadTexture? -

How can I change the texture in a Blender model loaded into three.js, after it's been loaded, with ImageUtils.loadTexture? -

i'm doing pupil project @ involves gift box users can alter how looks.

i started learning making cube, importing texture , setting gui.dat command allow user alter texture.

i'm trying replace cube blender model of gift box i'm having problem changing texture.

edit: total code on github here: https://github.com/gitkiwi/giftbox/blob/master/workspace/proto%208c%20changing%20textures%20on%20giftbox.html

the coding working cube model is:

`// add together cube texture

var cubegeometry = new three.cubegeometry(4,4,4); var cubematerial = new three.meshlambertmaterial({ map: three.imageutils.loadtexture("birthday.jpg") }); var cube = new three.mesh(cubegeometry,cubematerial); cube.position.set (0,0,0); cube.rotation.set (0,-1.2,0); cube.receiveshadow = true; // add together cube scene scene.add(cube); `

//gui texture change

`var controls = new function() { this.changetexture = "birthday"; this.changetexture = function (e){ var texture = three.imageutils.loadtexture ("../assets/textures/general/" + e + ".jpg"); cube.material.map = texture; }`

//gui control

var gui = new dat.gui(); gui.add(controls, "changetexture", ['christmas', 'valentine', 'birthday']).onchange(controls.changetexture);

i'm loading gift box in 4 parts , i'm trying first part, box, alter texture. load with:

var box; var loaderone = new three.jsonloader(); loaderone.load('../assets/models/box.js', function (geometry) { var material = new three.meshlambertmaterial({color: 0xffff00}); box = new three.mesh(geometry, material); box.position.set (5,0,5); box.scale.set (1,1,1); //box.name = "mybox"; scene.add(box); });

i can't alter texture gui control. i've tried changing "cube" "box" in gui texture alter code , i've tried naming box , calling it(commented out in code above) didn't work. i've searched answers in number of places i'm stuck. sense i'm perhaps missing obvious?

any help appreciated.

the code wasn't working because there no texture maps model importing.

what did go blender , create model 2 textures each applied whole model. exported json file had model geometry , 2 textures (with texture maps).

in three.js loaded it:

// load in geometry , textures var loader = new three.jsonloader(); loader.load('../models/two textures on cube.js', function (geometry, material) { matone = new three.meshlambertmaterial(material[1]); mattwo = new three.meshlambertmaterial(material[2]); box = new three.mesh(geometry, matone); //position, scale box.position.set (0,0,0); box.rotation.set (0,-1.2,0); box.scale.set (2,2,2); box.receiveshadow = true; scene.add(box); }, '../models');

and used code switch textures:

//gui command panel var controls = new function() { //changing texture this.changetexture = function (e) { switch (e) { case "birthday": box.material = matone; break; case "christmas": box.material = mattwo; break; } } }

with code gui.dat controls:

//gui command panel var gui = new dat.gui(); gui.add(controls, "changetexture", ['birthday', 'christmas']).onchange(controls.changetexture);

three.js textures blender