Question

24

Creating a plane, adding a texture on both sides and rotating the object on its side

rated 0 times [ 26] [ 2] / answers: 1 / hits: 37461 / 12 Years ago, wed, july 4, 2012, 12:00:00

I'm trying to create a long corridor with a repeating texture. How do I add a repeating texture and rotate a object (in this case a plane) at right angles to create the corridor wall's and ceiling?

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ariel

Add To Favorites

Follow

Total Points: 523

Total Questions: 111

Total Answers: 100

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

ariel questions

1 Typescript with Webpack - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Tue, May 24, 22, 00:00, 2 Years ago

1 why I can't delete .next folder in nextjs project

Thu, Mar 31, 22, 00:00, 2 Years ago

1 How to use NestJS Reflector inside a Custom Decorator?

Tue, Jan 5, 21, 00:00, 3 Years ago

1 How to format date in ant table?

Fri, May 1, 20, 00:00, 4 Years ago

1 ASP.NET Core 3.1 cannot process Axios request until ApiController attribute is added

Mon, Jan 20, 20, 00:00, 4 Years ago

View All

answered 12 Years ago jack · Accepted Answer

For an example of a repeating texture, check out the source of the example at:

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

I recommend the following changes to your code:

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