Three.jsその他の注意事項（10）-ステッカー

テクスチャ紹介

テクスチャマッピングはThreejsの非常に重要なコンテンツです。ゲーム、製品720ディスプレイ、IoT 3D視覚化、その他のプロジェクトの場合、プログラマーはモデルの読み込み中にテクスチャマッピングを処理する必要があります。

シンプルなテクスチャマップ

TextureLoader画像ロードスルーのload（）メソッドテクスチャマップローダは1を返すことができ纹理对象Texture、纹理对象Textureモデル材料カラーマップの.MAPプロパティの値として使用することができます。

マテリアルのカラーマップproperty.mapが設定されると、モデルはテクスチャマップからピクセル値を収集します。通常、この時点でマテリアルのcolor.colorを設定する必要はありません。グリッドモデルがカラーマップのカラー値RGBを取得するため、.mapマップはカラーマップと呼ばれます。
例：
タイル状の方法を使用して、草の画像PlaneGeometryを上に貼り付けます。画像は次のとおりです。

コード：

<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>

効果：

このとき、テクスチャマップは静的な状態です。移動するテクスチャマップが必要な場合は、texture.offset位置を設定できます。

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

効果：

キャンバステクスチャマップ

テクスチャを使用する過程で、テクスチャにさまざまな素材を使用できます

Three.jsクラスを介してCanvasTexture、Canvasキャンバスをテクスチャマップとして使用できます。

Three.jsテクスチャマップとしてのキャンバスキャンバス（CanvasTexture）
キャンバスキャンバスは、2D APIを介してさまざまな幾何学的形状を描画し、Canvasを介してアウトラインを描画し、Three.jsメッシュモデル、スプライトモデル、およびその他のモデルオブジェクトのテクスチャマップとして使用できます。

コアコード：

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

テクスチャの画像としてキャンバスを使用し、最初にキャンバスのコンテンツを作成します。キャンバスをDOMツリーに追加する必要はありません。

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);

効果：

ビデオビデオテクスチャマップ

Three.jsクラスを介してVideoTexture、ビデオをテクスチャマップとして使用できます。

Three.jsテクスチャマップとしてのビデオ（VideoTexture）

ビデオは本質的に画像ストリームのフレームです。Threejsモデルのテクスチャマップとしてビデオを使用すると、モデルのテクスチャマップとしてビデオからフレームごとに抽出し、テクスチャマップを継続的に更新してビデオを生成します。再生の効果。

ビデオをステッカーの画像として使用するには、最初に、ビデオをdomツリーに追加せずに、ビデオのコンテンツを作成します。
コード：

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

コアコード：

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

効果:(アップロード画像のサイズ制限により、gif画像のフレーム数が削除され、次の画像の表示効果がフリーズします）

バンプマップbumpMapと法線マップnormalMap

複雑なサーフェスモデルには、多くの場合、多数のモデル頂点と大きなモデルファイルがあります。モデルファイルのサイズを縮小するために、法線マップ。NormalMapアルゴリズムが自然に生成されます。複雑な3Dモデルの3Dアートを簡略化できます。単純なモデルの場合、細かいモデルの表面の複雑な幾何学的情報を法線マップにマッピングします。normalMap

前回の記事では、実際には、マップを使用して回転地球モデルが作成されました。詳細については、参照してください：Three.jsその他の注意事項（9）-演習：Earth

地球の前には、山の突起はなく、平面図だけでした。これで、ディスカバリーマップを使用して、山の効果を作成できます。
法線マップ：

コード：

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);

効果：