2012-07-04 1 views
7

繰り返しテクスチャで長い廊下を作成しようとしています。繰り返すテクスチャを追加してオブジェクト(この場合は平面)を直角に回転させて廊下の壁と天井を作成するにはどうすればよいですか?繰り返しテクスチャの例プレーンを作成し、両側にテクスチャを追加し、オブジェクトを横に回転させます。

var texture, material, plane; 

texture = THREE.ImageUtils.loadTexture("../img/texture.jpg"); 
texture.wrapT = THREE.RepeatWrapping; // This doesn't seem to work; 
material = new THREE.MeshLambertMaterial({ map : texture }); 
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material); 
plane.doubleSided = true; 
plane.position.x = 100; 
plane.rotation.z = 2; // Not sure what this number represents. 
scene.add(plane); 
+0

下記の私のソリューションをチェックしてください。 – mattdlockyer

答えて

10

、で例のソースをチェックアウト:

http://stemkoski.github.com/Three.js/Texture-Repeat.html

私はあなたのコードに以下の変更をお勧めします:

var texture, material, plane; 

texture = THREE.ImageUtils.loadTexture("../img/texture.jpg"); 

// assuming you want the texture to repeat in both directions: 
texture.wrapS = THREE.RepeatWrapping; 
texture.wrapT = THREE.RepeatWrapping; 

// how many times to repeat in each direction; the default is (1,1), 
// which is probably why your example wasn't working 
texture.repeat.set(4, 4); 

material = new THREE.MeshLambertMaterial({ map : texture }); 
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material); 
plane.material.side = THREE.DoubleSide; 
plane.position.x = 100; 

// rotation.z is rotation around the z-axis, measured in radians (rather than degrees) 
// Math.PI = 180 degrees, Math.PI/2 = 90 degrees, etc. 
plane.rotation.z = Math.PI/2; 

scene.add(plane); 
+0

テクスチャを繰り返すことは単一のテクスチャでは機能しますが、両面ではどうなりますか?以下の解決策を参照してください。 – mattdlockyer

+2

'plane.side = THREE.DoubleSide' < - 私はあなたがここでタイプミスをしたかもしれないと思います。 'plane.material.side = THREE.DoubleSide'はうまくいくようです。 –

2

をしすべてのジオメトリを複製せずにソリューションを検索します。

ここでは、yaのための

var materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}), 
       new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})]; 

var geometry = new THREE.PlaneGeometry(width, height); 

for (var i = 0, len = geometry.faces.length; i < len; i++) { 
    var face = geometry.faces[i].clone(); 
    face.materialIndex = 1; 
    geometry.faces.push(face); 
    geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0)); 
} 

scene.add(new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials))); 

BOOM二直面飛行機...紳士淑女を行く、ループはまた、それぞれの顔を複製し、裏面のテクスチャを適用し、より多くの顔を持つジオメトリで動作します。

お楽しみください!

2

私は同じことを探していましたが、間違ったオブジェクトに対してプロパティTHREE.DoubleSideを使用しました。メッシュ自体ではなく、マテリアル上で使用する必要があります。

material.side = THREE.DoubleSide; 

...それ以上のことはありません!