javascript - Three.js: no luck updating cube textures on runtime with r59 -
i created cube using canvas renderer r59 of three.js. cube has different textures on different sides. renders okay. can tween cube's position , rotation, it's fine.
here's want do: a) cube has image texture on it's front side. b) move cube out of camera's view. c) change image texture on cube. d) move cube original coordinates becomes visible again.
so far, steps a, b , d working. when try implement step c, stops working. here relevant code parts...
<body> <script src="build/three.min.js"></script> <script src="js/libs/tween.min.js"></script> <script> var container; var camera, scene, renderer, group, particle; var cubemesh; var matcollection = []; var materials = []; init(); animate(); function init() { container = document.createelement( 'div' ); document.body.appendchild( container ); camera = new three.perspectivecamera( 75, window.innerwidth / window.innerheight, 1, 3000 ); camera.position.z = 1000; scene = new three.scene(); var cubegeometry = new three.cubegeometry(800, 600, 30, 8, 8, 8); cubegeometry.dynamic = true; // creating 3 textures var nehetexturesmall = new three.imageutils.loadtexture("test3.jpg"); var nehetexturebig1 = new three.imageutils.loadtexture("break01.jpg"); var nehetexturebig2 = new three.imageutils.loadtexture("break02.jpg"); // putting 2 different sets of materials material collection array materials = [ new three.meshbasicmaterial({ map:nehetexturebig1, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturesmall, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturesmall, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturesmall, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturebig1, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturebig1, side: three.doubleside }) ]; matcollection.push( materials ); materials = [ new three.meshbasicmaterial({ map:nehetexturebig2, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturesmall, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturesmall, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturesmall, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturebig2, side: three.doubleside }), new three.meshbasicmaterial({ map:nehetexturebig2, side: three.doubleside }) ]; matcollection.push( materials ); cubemesh = new three.mesh(cubegeometry, new three.meshfacematerial( matcollection[0] )); cubemesh.dynamic = true; cubemesh.position.set(0, 0, 500); // applying first set of materials on cubemesh creation works renderer = new three.canvasrenderer(); renderer.setclearcolor(0x000000, 1); renderer.setsize( window.innerwidth, window.innerheight ); container.appendchild( renderer.domelement ); } function animate() { requestanimationframe( animate ); render(); } function render() { tween.update(); camera.lookat( scene.position ); // rotate cube - dropped value manipulation cubemesh.rotation.set(xrotation, yrotation, zrotation); renderer.render( scene, camera ); } // not working function changetexture() { currentmat++; if (currentmat >= matcollection.length) { currentmat = 0; } cubemesh.material = matcollection[currentmat]; cubemesh.material.needsupdate = true; } </script> </body> in project, doing lot more tweening (moving , rotating lot of objects) , calling changetexture() there...
when leaving out line...
cubemesh.material = matcollection[currentmat]; from function, works fine. cube moves out , comes view showing same texture.
what should change?
thank in advance sharing expertise.
oliver
done.
instead of trying preload material array of materials, created array of individual textures called mytextures , applied newly created material (using textures mytextures array) each side of cube mesh.
... var mytextures = []; ... then, in init() function: nehetexturesmall = new three.imageutils.loadtexture("test3.jpg"); mytextures.push( nehetexturesmall ); (var myy = 0; myy<imgnamearray.length;myy++) { nehetexture = new three.imageutils.loadtexture(imgnamearray[myy]); mytextures.push( nehetexture ); } ... in changetexture() function: cubemesh.material.materials[0] = new three.meshbasicmaterial({map: mytextures[currentmat+1], side: three.doubleside }); cubemesh.material.materials[1] = new three.meshbasicmaterial({map: mytextures[0], side: three.doubleside }); cubemesh.material.materials[2] = new three.meshbasicmaterial({map: mytextures[0], side: three.doubleside }); cubemesh.material.materials[3] = new three.meshbasicmaterial({map: mytextures[0], side: three.doubleside }); cubemesh.material.materials[4] = new three.meshbasicmaterial({map: mytextures[currentmat+1], side: three.doubleside }); cubemesh.material.materials[5] = new three.meshbasicmaterial({map: mytextures[currentmat+1], side: three.doubleside }); that works pretty well. not (the image seems split many triangles problem...). :-(
Comments
Post a Comment