【Three.js(r74)】テクスチャを読み込み画質を変更したい

2016年2月24日

Three.js(r74)のスフィアに360°のテクスチャを貼り付けることをしたかった。
テクスチャは貼り付けられたけど、重なるピクセルの調整などの設定がわからなかった。
デフォルトがかなりももやっとした感じで気に入らなかった。

    texture.minFilter = LinearMipMapNearestFilter;//デフォルト
    texture.minFilter = THREE.LinearFilter;
    texture.minFilter = THREE.NearestMipMapLinearFilter
    texture.minFilter = THREE.NearestMipMapNearestFilter

※デフォルト間違ってました。。。LinearMipMapNearestFilterでした。ご指摘ありがとうございます。

<参考>
http://threejs.org/docs/#Reference/Textures/Texture

こんな感じでFilterがあったのでメモ。

サンプルコード

var tlloader = new THREE.TextureLoader();
var _src = 'imageUrl.png';


tlloader.load(

//イメージ画像URL
_src,
function(texture){

    //geo生成
    var geometry = new THREE.SphereGeometry(100, 60, 40);
	//material生成
    var material = new THREE.MeshBasicMaterial({
        map: texture,
        side:THREE.FrontSide
    });

    group.add(mesh);

    //テクスチャレンダリング具合
    texture.minFilter = THREE.LinearFilter;

});

ぼやき

3Dの知識がないからSphereGeometryをどうすればいいか、とかとか結構悩む。
結果見えてればいいやぁってなるんだけど、それではダメだなと。
もっと勉強が必要。