Tạo mặt phẳng, thêm kết cấu ở cả hai bên và xoay đối tượng ở cạnh của nó

Question

Tôi đang cố tạo hành lang dài với kết cấu lặp lại. Làm cách nào để thêm kết cấu lặp lại và xoay đối tượng (trong trường hợp này là mặt phẳng) ở các góc vuông để tạo thành bức tường và trần của hành lang?

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

Answer 1

Đối với một ví dụ về một kết cấu lặp lại, kiểm tra nguồn của ví dụ tại địa chỉ:

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

Tôi khuyên bạn nên các thay đổi sau mã của bạn:

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

Answer 2

Đã tìm kiếm giải pháp mà không cần sao chép tất cả hình của tôi.

Ở đây bạn đi thưa quý vị ...

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 một Two Faced Plane cho ya, vòng lặp cũng sẽ làm việc với hình học với nhiều khuôn mặt, tái tạo từng khuôn mặt và áp dụng các kết cấu mặt sau với nó.

Tận hưởng!

Answer 3

Tôi đang tìm kiếm điều tương tự và bạn vừa sử dụng thuộc tính THREE.DoubleSide trên đối tượng sai. Bạn nên sử dụng nó trên vật liệu thay vì trên bản thân lưới:

material.side = THREE.DoubleSide; 

... không có gì khác!