I search to repeat texture on the model. On all examples or questions I found only this like as:
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 3, 3 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );
I understand this, but when the material is written like this:
Wood: new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0xffffff,
shininess: 10,
map: new THREE.ImageUtils.loadTexture ( "models/macabann/chataigner.jpg"),
// not sure as right
WrapS : THREE.RepeatWrapping,
WrapT : THREE.RepeatWrapping,
maprepeat : [2,2],
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.05
} )
I search how to write exactly this in this format if is possible. Thanks for any answers.
To load a texture in Three. js, the TextureLoader object is used. After defining and then setting a loaded texture object or variable, it can become the map for a material. Note: Because of security settings, web browsers will not load resources like images across different protocols and origins.
A repeating texture is created by tiling or repeating an image in a grid. A seamless repeating texture is one where you cannot see the border of each tile because the images match continuously at each tile edge (like aligning a wallpaper pattern at the edges of the paper).
In three. js, texture is created to apply to a surface, or as a reflection or refraction map. Texture mapping is a method for defining high-frequency detail, surface texture, or color information on a computer-generated 2D graphic or 3D model.
You want a texture to repeat on you model. To do so, follow this pattern:
var loader = new THREE.TextureLoader();
var texture = loader.load( 'myTexture.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 2, 2 );
} );
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0x111111,
shininess: 10,
map: texture,
. . .
} );
EDIT: Updated to three.js r.84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With