THREE.jsのテクスチャについて調べる
基本的なテクスチャの貼り方
一番シンプルな貼り方は下記になります。
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', function (textuer) { mat.map = textuer; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh); });
テクスチャに利用する画像サイズは「256 x 256、512 x 512、1024 x 1024」 2の累乗を適切になります。
テクスチャの拡大縮小用のフィルタ
テクスチャをどう拡大するかにつていは、magFilterで設定、縮小するかについてはminFilterプロパティで設定できます。
フィルタ | 説明 |
---|---|
THREE.NearestFilter | もっとも近くにあるピクセルの色を使用する。拡大した場合はブロックノイズは生じ、縮小時に使用するとディティールが大幅に失われる。 |
THREE.LinearFilter | NearestFilterより高度なフィルタで、縮小時にはディティールが失われるが、拡大時はブロックノイズが少なくなる |
THREE.NearestFilter
THREE.LinearFilter
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); textuerLoader.load('images/n.jpg', function (textuer) { textuer.magFilter = THREE.NearestFilter; textuer.minFilter = THREE.NearestFilter; mat.map = textuer; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh); });
バンプマップ
バンプマップはテクスチャに奥行きを出すために使います。 バンプマップを使用する場合は、テクスチャ画像を2つ用意します。
コードは下のようになります。
let textuerLoader = new THREE.TextureLoader(); let mat = new THREE.MeshPhongMaterial(); let geom = new THREE.BoxGeometry(3, 3, 3); let textuer = textuerLoader.load('images/tile.png'); mat.map = textuer; let bump = textuerLoader.load('images/bump.png'); mat.bumpMap = bump; mat.bumpScale = 0.2; let mesh = new THREE.Mesh(geom, mat); scene.add(mesh);
まとめ
他にも法線バンプマップなどもあるのですが、効果てきなテクスチャの作り方がわかりませんでした。