Three.js Miscellaneous Notes (10)-Stickers

Texture introduction

Texture mapping is a very important content of Threejs. For games, product 720 display, IoT 3D visualization and other projects, programmers need to process texture mapping while loading models.

Simple texture map

TextureLoaderLoading a picture through the load() method of the texture map loader can return one 纹理对象Texture, which 纹理对象Texturecan be used as the value of the .map property of the model material color map.

After the material's color map property.map is set, the model will collect pixel values ​​from the texture map. Generally speaking, it is not necessary to set the material color.color at this time. The .map map is called a color map because the grid model will get the color value RGB of the color map.
Example:
Use the tiled method to paste the grass picture PlaneGeometryon top, the picture is 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); //平面
	var textureLoader = new THREE.TextureLoader(); // 纹理加载器
	var texture = textureLoader.load('./img/grass/grass.png'); 
	// 设置阵列模式   默认ClampToEdgeWrapping  RepeatWrapping：阵列  镜像阵列：MirroredRepeatWrapping
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	// uv两个方向纹理重复数量
	texture.repeat.set(10, 10);
	var material = new THREE.MeshBasicMaterial({
    
    
		map: texture, // 设置纹理贴图
		side: THREE.DoubleSide
	});
	var plane = new THREE.Mesh(geometry, material);
	scene.add(plane);

	// 相机
	camera.position.set(20, 20, 40); //设置相机位置
	camera.lookAt(new THREE.Vector3(0, 0, 0))
	/********************************************************/
	function animate(){
    
    
		render.render(scene, camera);
		window.requestAnimationFrame(animate);
	}
	animate();
</script>

effect:

At this time, the texture map is in a static state, if you want a moving texture map, you can set the texture.offsetposition

function animate(){
    
    
	// 设置纹理偏移
	texture.offset.x -= 0.06
	render.render(scene, camera);
	window.requestAnimationFrame(animate);
}
animate();

effect:

Canvas texture map

In the process of using textures, different materials can be used on the textures

Through the Three.js class CanvasTexture, the Canvas canvas can be used as a texture map.

Canvas canvas as a Three.js texture map ( CanvasTexture)
Canvas canvas can draw a variety of geometric shapes through 2D API, and can draw an outline through Canvas and then use it as a texture map for three.js mesh model, sprite model and other model objects.

Core code:

var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = new THREE.CanvasTexture(canvas); 

Use canvas as the picture of the texture, first create the content of the canvas, do not need to add the canvas to the dom tree

var canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 128;
var c = canvas.getContext('2d');
// 矩形区域填充背景
c.fillStyle = "#ff0000";
c.fillRect(0, 0, 512, 128);
c.beginPath();
// 文字
c.beginPath();
c.translate(256, 64);
c.fillStyle = "#fff"; //文本填充颜色
c.font = "bold 28px 宋体"; //字体样式设置
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
c.fillText("空城机  (￣ε(#￣)☆╰╮o(￣皿￣///)", 0, 0);

var geometry = new THREE.PlaneGeometry(40, 20, 32); 
var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = new THREE.CanvasTexture(canvas);  // canvas做画布

// 设置阵列模式   默认ClampToEdgeWrapping  RepeatWrapping：阵列  镜像阵列：MirroredRepeatWrapping
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(1, 1);

var material = new THREE.MeshBasicMaterial({
    
    
	map: texture, // 设置纹理贴图
	side: THREE.DoubleSide  // 双面
});
var box = new THREE.Mesh(geometry, material);
scene.add(box);

effect:

video video texture map

Through the Three.js class VideoTexture, the video can be used as a texture map.

Video as a Three.js texture map (VideoTexture)

Video is essentially a frame of picture stream. The video is used as the texture map of the Threejs model, which is to extract frame by frame from the video as the texture map of the model, and then continuously update the texture map to generate the video The effect of playback.

To use a video as a picture of a sticker, first create the content of the video, without adding the video to the dom tree.
Code:

let video = document.createElement('video'); //创建video对象
video.src = "../img/灭世 第二季1.mp4"; // 设置视频地址
video.autoplay = "autoplay"; //要设置播放
video.loop = "loop";  //循环播放

Core code:

var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = new THREE.VideoTexture(video);  //视频当作贴图

Effect: (Due to the upload image size limitation, the number of frames of the gif image has been deleted, causing the display effect of the following image to be stuck)

Bump map bumpMap and normal map normalMap

A complex surface model often has a large number of model vertices and a large model file. In order to reduce the size of the model file, the normal map. NormalMap algorithm is naturally generated. The 3D art of the complex 3D model can be simplified by reducing the surface For the simple model, then map the complex geometric information of the precision model surface to the normal map.normalMap

In a previous article, in fact, a rotating earth model has been made using the map. For details, please refer to: Three.js Miscellaneous Notes (9)-Exercise: Earth

Before the earth, there were no protrusions of mountains, just a plan view. Now, you can use the discovery map to create the effect of the mountains.
Normal map:

Code:

var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = textureLoader.load('./img/earth/css_globe_diffuse.jpg'); // 加载图片，返回Texture对象
// 加载法线贴图
var textureNormal = textureLoader.load('./img/earth/earth_normal_2048.jpg');

var material = new THREE.MeshPhongMaterial({
    
    
	map: texture, // 设置纹理贴图
	normalMap: textureNormal, //法线贴图
    //设置深浅程度，默认值(1,1)。
    normalScale: new THREE.Vector2(1.2, 1.2),
});
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

effect: