Skip to content

Latest commit

 

History

History
63 lines (43 loc) · 2.14 KB

12_texture_loading.md

File metadata and controls

63 lines (43 loc) · 2.14 KB

Example step

Load texture and apply it to a material.

Goal

Make a wood material using wood texture.

Instructions

  • start from our default scene

  • download a wood texture from linzhouweb.com

  • set up a cube geometry of 3 units per side

    var cubeGeometry = new THREE.BoxGeometry(3,3,3);

  • create a new texture with THREE.ImageUtils.loadTexture(src), in this example we are picking the one in examples/img

    var texture = THREE.ImageUtils.loadTexture('img/wood.jpg');

  • create new LambertMaterial with option map referencing the texture

    material = new THREE.MeshLambertMaterial({
    map: texture
});

  • assemble the Mesh object using cube geometry and the material as usual and add it to your scene

    var mesh = new THREE.Mesh(cubeGeometry, material);
scene.add(mesh);

  • keep always the console open: by default the missing textures fall back to black color, so if you see something strange maybe that the script is not finding the image

Explanation

Textures are a way to add realistic effect to materials: they need to be created using an image and THREE.ImageUtils.loadTexture(src) is the quickest and simplest method to do it. However, we are using the returned object, which is actually a THREE.Texture object with undefined source. It will be modified after the texture loading, so be aware of this if you are accessing the image data.

See the sources for more informations THREE.ImageUtils sources

You could also define a onLoad and onError handler, have a look to method's signature:

```javascript
loadTexture ( url, mapping, onLoad, onError )
```

Deeper:

  • Texture theory are based on UV mapping, and they are well known from cartographer. See more in the wikipedia page about map projection.