javascript - Using multiple textures on different faces of one geometry -


i'm quite new three.js i'm not sure if it's possible this:

i want display multiple images on plane geometry (some of them appear multiple times). imagine next simplified case:

+---+---+---+   | 1 | 2 | 3 |   +---+---+---+   | 4 | 1 | 6 |   +---+---+---+   | 1 | 1 | 9 |   +---+---+---+

i'm creating plane it's divisions , applying meshbasicmaterial (contained inside meshfacematerial) faces. each pair of faces has assigned 1 of available images, ie:

  • image1 applied faces {0, 1}, {8, 9}, {12, 13}, {14, 15}
  • image2 applied faces {2, 3}
  • ...

the images "correctly" appearing on right position size not correct. each tile square 256x256 pixels size , each image displayed 256x256. problem texture size being streched edge of geometry.

i've tried play texture wraps/wrapt properties no luck it's stretching out 768x768 (in example).

my current code:

// texture loading loop // canvas contains 256x256 image var texture = new three.texture(canvas); //my last test trying clamp edge of face -> failed texture.wraps = texture.wrapt = three.clamptoedgewrapping; texture.needsupdate = true; this.materials.push(     new three.meshbasicmaterial({         map: texture     }) );  // later, generate geometry display images var geometry = new three.planegeometry( 256*3, 256*3, 3, 3 ); // assign material each face (each face 2 triangles) var l = geometry.faces.length; for( var = 0; < l; i+=2 ) {     // assigned_material contains index of material texture display     // on each "square"     geometry.faces[ ].materialindex = assigned_material[i];     geometry.faces[ i+1 ].materialindex = assigned_material[i]; } // mesh mesh = new three.mesh( geometry, new three.meshfacematerial( this.materials ) ); this.scene.add( mesh );

is possible assign same material texture different faces , keep current size, on each tile texture displayed current size?

to make more clear issue, on result image can see same texture applied center, left-bottom , right-bottom tiles , each 1 should displaying full version of 256x256 pixels image. http://angelraposo.appspot.com/images/result.jpg

the dimensions of plane geometry irrelevant -- aspect ratio matters, images not stretched.

you have several options:

  1. you can change uvs of each triangle of plane geometry (0,0), (0,1), (1,0), or (1,1) appropriate.

  2. you can set texture.offset , texture.repeat properties appropriate each texture. example, texture.offset.set( 0, 1/3 ) , texture.repeat.set( 3, 3 ).

  3. a final, easy, option have 9 plane geometries, each 2 triangular faces.

three.js r.66


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more