Designing an aircraft, applying a textured finish to all surfaces, and twisting the structure sideways

Question

Designing an aircraft, applying a textured finish to all surfaces, and twisting the structure sideways

I am attempting to design a lengthy corridor with a repetitive texture. How can I incorporate a repeating texture and rotate an object (specifically a plane) at right angles to form the walls and ceiling of the corridor?

let texture, material, plane;

texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );
texture.wrapT = THREE.RepeatWrapping;  // The effect isn't quite as intended;
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;  // Unsure about the significance of this value.
scene.add(plane);

javascript three.js

Answer 1

Answer №1

If you need an example of a repeating texture, take a look at the source code provided here:

I suggest making the following adjustments to your current code:

let texture, material, plane;

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

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

// specify how many times the texture should repeat in each direction
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 determines the z-axis rotation in radians (not degrees)
// Math.PI holds the value for 180 degrees, Math.PI / 2 equals 90 degrees, etc.
plane.rotation.z = Math.PI / 2;

scene.add(plane);

Answer 2

If you need an example of a repeating texture, take a look at the source code provided here:

I suggest making the following adjustments to your current code:

let texture, material, plane;

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

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

// specify how many times the texture should repeat in each direction
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 determines the z-axis rotation in radians (not degrees)
// Math.PI holds the value for 180 degrees, Math.PI / 2 equals 90 degrees, etc.
plane.rotation.z = Math.PI / 2;

scene.add(plane);

Answer 3

Answer №2

After looking for a solution that wouldn't involve duplicating all of my geometry, I finally found it.

Presenting to you, ladies and gentlemen...

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

Voilà! A Two Faced Plane solution ready for your use. The loop provided will even cater to geometries with multiple faces, replicating each one and applying the BackSide texture as needed.

Enjoy this handy trick!

Answer 4

After looking for a solution that wouldn't involve duplicating all of my geometry, I finally found it.

Presenting to you, ladies and gentlemen...

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

Voilà! A Two Faced Plane solution ready for your use. The loop provided will even cater to geometries with multiple faces, replicating each one and applying the BackSide texture as needed.

Enjoy this handy trick!

Answer 5

Answer №3

I was searching for a solution to this issue as well and it turns out the THREE.DoubleSide property should be applied to the material, not the mesh. Here's how you can do it:

material.side = THREE.DoubleSide;

That's all there is to it!

Answer 6

I was searching for a solution to this issue as well and it turns out the THREE.DoubleSide property should be applied to the material, not the mesh. Here's how you can do it:

material.side = THREE.DoubleSide;

That's all there is to it!

Answer 7

Answer №4

Update for 2019: `Imageutil.loadTexture` is now considered obsolete,

It is recommended to use THREE.TextureLoader() instead

 new THREE.TextureLoader().load(
          WOOD,
          //use texture as material Double Side
          texture => {
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.offset.x = 90/(2*Math.PI);
            var woodMaterial = new THREE.MeshPhongMaterial({
              map: texture,
              side: THREE.DoubleSide
            });

            // Add Ground
            groundMesh = new THREE.Mesh(
              new THREE.PlaneGeometry(GRID_SIZE, GRID_SIZE, 32),
              woodMaterial
            );

            //rotate
            groundMesh.rotation.x = Math.PI / 2;
            this.scene.add(groundMesh);
          }
        );

Answer 8

Update for 2019: `Imageutil.loadTexture` is now considered obsolete,

It is recommended to use THREE.TextureLoader() instead

 new THREE.TextureLoader().load(
          WOOD,
          //use texture as material Double Side
          texture => {
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.offset.x = 90/(2*Math.PI);
            var woodMaterial = new THREE.MeshPhongMaterial({
              map: texture,
              side: THREE.DoubleSide
            });

            // Add Ground
            groundMesh = new THREE.Mesh(
              new THREE.PlaneGeometry(GRID_SIZE, GRID_SIZE, 32),
              woodMaterial
            );

            //rotate
            groundMesh.rotation.x = Math.PI / 2;
            this.scene.add(groundMesh);
          }
        );

Designing an aircraft, applying a textured finish to all surfaces, and twisting the structure sideways

Answer №1

Answer №2

Answer №3

Answer №4

Update for 2019: `Imageutil.loadTexture` is now considered obsolete,

Similar questions

Adding a listener to an element within a loop

How can I use jQuery to hide the calendar popup on the Bootstrap date picker?

Retrieve parameters from functions and convert them into coherent statements

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

What is the importance of cloning React state before making changes or while working on it?

Switched from btao to Buffer, however encountering a TypeError while trying to push to Vercel

Exploring the method of extracting multiple checkbox values from an HTML form

Experience the feeling of releasing momentum by click and dragging the scroll

Is it possible to use jQuery to load an HTML file and extract its script?

Exploring MongoDB through User Interface Requests

Using JavaScript to Retrieve, Manipulate, and Merge JSON Data from Various Files

Creative ways to conceal JavaScript within your Wordpress website

Retrieving Data from a Database Using JS and NodeJs: Utilizing AJAX to Access Table Data and Showcase it in a

Switching Primary Menu Selection When Scrolling Through Various Menu Options

Using Bootstrap to present information with a table

The message vanishes upon refreshing the page

Guide to storing a variable value when a user clicks on the client-side in a Grid View:

Guide on updating a single element in a Firebase array

How to Safeguard an AJAX Service Request using jQuery and PHP (with a Session Token)

Visitors may not immediately notice the CSS/JavaScript modifications in their browsers

Designing an aircraft, applying a textured finish to all surfaces, and twisting the structure sideways

Answer №1

Answer №2

Answer №3

Answer №4

Update for 2019: Imageutil.loadTexture is now considered obsolete,

Similar questions

Adding a listener to an element within a loop

How can I use jQuery to hide the calendar popup on the Bootstrap date picker?

Retrieve parameters from functions and convert them into coherent statements

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

What is the importance of cloning React state before making changes or while working on it?

Switched from btao to Buffer, however encountering a TypeError while trying to push to Vercel

Exploring the method of extracting multiple checkbox values from an HTML form

Experience the feeling of releasing momentum by click and dragging the scroll

Is it possible to use jQuery to load an HTML file and extract its script?

Exploring MongoDB through User Interface Requests

Using JavaScript to Retrieve, Manipulate, and Merge JSON Data from Various Files

Creative ways to conceal JavaScript within your Wordpress website

Retrieving Data from a Database Using JS and NodeJs: Utilizing AJAX to Access Table Data and Showcase it in a

Switching Primary Menu Selection When Scrolling Through Various Menu Options

Using Bootstrap to present information with a table

The message vanishes upon refreshing the page

Guide to storing a variable value when a user clicks on the client-side in a Grid View:

Guide on updating a single element in a Firebase array

How to Safeguard an AJAX Service Request using jQuery and PHP (with a Session Token)

Visitors may not immediately notice the CSS/JavaScript modifications in their browsers

Update for 2019: `Imageutil.loadTexture` is now considered obsolete,