12 Aug 2014, 04:14
Generic-user-small

Thomas Koon (13 posts)

I am working on a Slenderman game(you know, the ones where you pee your pants at the slightest thing) and i don’t want to spend 1232017483743289749e3249384320984 hours making detailed structures out of geometries. Can you please tell me how to wrap images around geometries? ;3

12 Aug 2014, 12:00
Chris_strom_headshot_200_pragsmall

Chris Strom (116 posts)

Wrapping an image is a three step process. First, you need to store the image on a web server somewhere. Then in your code, you need to create a “Texture” from the image. Lastly, you need to supply that texture to the usual Material.

Something like the following should work:

  var img = new Image();
  var texture = new THREE.Texture(img);
  img.onload = function () { texture.needsUpdate = true; };
  img.src = 'http://some-web-server.com/face.png';
  texture.needsUpdate = true;

  var material = new THREE.MeshPhongMaterial({map: texture});
  var geometry = new THREE.SphereGeometry(75);
  var head = new THREE.Mesh(geometry, material);

I am not 100% sure that the two lines with needsUpdate are needed, but they helped at some point with my experiments. It is important to have light in your scene when working with images. An example can be found at: http://japhr.blogspot.com/2012/08/threejs-image-textures-and-shininess.html.

13 Aug 2014, 01:18
Generic-user-small

Thomas Koon (13 posts)

nice excuse to advertise you blog XD

13 Aug 2014, 01:18
Generic-user-small

Thomas Koon (13 posts)

*your

  You must be logged in to comment