Loading an image using the load() method of TextureLoader returns the Texture object Texture, which can be used as the value of the model material color map.map property.

The color map attribute of the material. After the map is set, the model will collect pixel values from the texture map. The map is called a color map because the mesh model gets the RGB color value of the color map. Example: Using tiling, attach the grass image to PlaneGeometry as follows:

Code:

<div id="app"></div>
<script type="text/javascript">
	var scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(45.window.innerWidth / window.innerHeight, 1.1000);
	render = new THREE.WebGLRenderer({
		antialias: true
	});
	render.setPixelRatio(window.devicePixelRatio);
	render.setSize(window.innerWidth, window.innerHeight)
	/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
	var app = document.getElementById("app");
	app.appendChild(render.domElement);
		
	var geometry = new THREE.PlaneGeometry(20.20.32); / / plane
	var textureLoader = new THREE.TextureLoader(); // Texture loader
	var texture = textureLoader.load('./img/grass/grass.png'); 
	// Set array mode to default ClampToEdgeWrapping RepeatWrapping: Array Mirroring Array: MirroredRepeatWrapping
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	// Uv texture repeats in both directions
	texture.repeat.set(10.10);
	var material = new THREE.MeshBasicMaterial({
		map: texture, // Set the texture map
		side: THREE.DoubleSide
	});
	var plane = new THREE.Mesh(geometry, material);
	scene.add(plane);

	/ / camera
	camera.position.set(20.20.40); // Set the camera position
	camera.lookAt(new THREE.Vector3(0.0.0))
	/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
	function animate(){
		render.render(scene, camera);
		window.requestAnimationFrame(animate);
	}
	animate();
</script>
Copy the code

Effect:

The texture map is static. If you want a moving texture map, you can set the texture. Offset position

function animate(){
	// Set the texture offset
	texture.offset.x -= 0.06
	render.render(scene, camera);
	window.requestAnimationFrame(animate);
}
animate();
Copy the code

Effect:

Using the video as a texture map can be implemented using the three. js class VideoTexture separately.

In order to reduce the size of the model file, normalMap algorithm is naturally generated. 3D art of complex 3D models can be simplified into simple models by subtracting faces. The complex geometry information of the fine surface is then mapped to a normal map. normalMap



In a previous article, we created a rotating earth model using textures:Three. Js Miscellany (9) — Exercise: The Earth

There were no mountains on earth before, just a plane map. Now you can use the Discovery map to create the mountain effect

Normal map:

Code:

var textureLoader = new THREE.TextureLoader(); // Texture loader
var texture = textureLoader.load('./img/earth/css_globe_diffuse.jpg'); // Load the image and return the Texture object
// Load the normal map
var textureNormal = textureLoader.load('./img/earth/earth_normal_2048.jpg');

var material = new THREE.MeshPhongMaterial({
	map: texture, // Set the texture map
	normalMap: textureNormal, // Normal map
    // set the depth, default (1,1).
    normalScale: new THREE.Vector2(1.2.1.2)});var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
Copy the code

Effect: