How can I apply a texture to a 3D rectangle in THREE.js?

Question

How can I apply a texture to a 3D rectangle in THREE.js?

I am attempting to create a 3D box in THREE.js that represents a box made up of 2x4 Legos, measuring 24 pieces wide by 48 pieces long and an unspecified number of pieces tall. I have created a texture displaying this pattern using random colors:

https://i.sstatic.net/sFuRN.png

I want to display two sides of this cube while ensuring that the textures align so that the edge pieces match in color, similar to what is shown in this Blender-generated image:

https://i.sstatic.net/eUP8T.jpg

I would prefer not to create six separate images for a CubeTexture, especially since four would be unnecessary. Is there a way to flip the texture on one side to create the appearance of alignment? (This is purely for visual effect.)

Furthermore, not all 3D rectangles will be cubes, but I am struggling to determine how to set the texture.repeat.x and texture.repeat.y properties so that the width scales correctly while maintaining the same vertical scale, stopping when it reaches the object's height, like in this example:

https://i.sstatic.net/ZTtZs.png

Thank you!

javascript 3d three.js textures

Answer 1

Answer №1

To create a mirror effect on an image, you can achieve this by flipping the UVs.

It's important to identify which UVs correspond to the specific face you want to mirror and determine the correct direction for the flip based on your geometry structure.

Below is an example illustrating how to use a simple BoxBufferGeometry and adjust its uv attribute to achieve a mirrored effect through UV flipping. (The right face demonstrates the result of UV flipping)

var textureURL = "https://upload.wikimedia.org/wikipedia/commons/0/02/Triangular_hebesphenorotunda.png";
// attribution and license here: https://commons.wikimedia.org/wiki/File:Triangular_hebesphenorotunda.png

var renderer = new THREE.WebGLRenderer({antialias:true});
document.body.appendChild(renderer.domElement);
renderer.setSize(500, 500);

var textureLoader = new THREE.TextureLoader();

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(28, 1, 1, 1000);
camera.position.set(50, 25, 50);
camera.lookAt(scene.position);
scene.add(camera);

camera.add(new THREE.PointLight(0xffffff, 1, Infinity));

var cubeGeo = new THREE.BoxBufferGeometry(20, 20, 20);
var uvs = cubeGeo.attributes.uv;
// originally:
// [0] = 0,1
// [1] = 1,1
// [2] = 0,0
// [3] = 1,0
// convert to:
// [0] = 1,1
// [1] = 0,1
// [2] = 1,0
// [3] = 0.0
uvs.setX(0, 1);
uvs.setY(0, 1);
uvs.setX(1, 0);
uvs.setY(1, 1);
uvs.setX(2, 1);
uvs.setY(2, 0);
uvs.setX(3, 0);
uvs.setY(3, 0);
uvs.needsUpdate = true;

var mat = new THREE.MeshLambertMaterial({
  color: "white",
  map: textureLoader.load(textureURL, function(){
    animate();
  })
});
var mesh = new THREE.Mesh(cubeGeo, mat);
scene.add(mesh);

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>

Answer 2

To create a mirror effect on an image, you can achieve this by flipping the UVs.

It's important to identify which UVs correspond to the specific face you want to mirror and determine the correct direction for the flip based on your geometry structure.

Below is an example illustrating how to use a simple BoxBufferGeometry and adjust its uv attribute to achieve a mirrored effect through UV flipping. (The right face demonstrates the result of UV flipping)

var textureURL = "https://upload.wikimedia.org/wikipedia/commons/0/02/Triangular_hebesphenorotunda.png";
// attribution and license here: https://commons.wikimedia.org/wiki/File:Triangular_hebesphenorotunda.png

var renderer = new THREE.WebGLRenderer({antialias:true});
document.body.appendChild(renderer.domElement);
renderer.setSize(500, 500);

var textureLoader = new THREE.TextureLoader();

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(28, 1, 1, 1000);
camera.position.set(50, 25, 50);
camera.lookAt(scene.position);
scene.add(camera);

camera.add(new THREE.PointLight(0xffffff, 1, Infinity));

var cubeGeo = new THREE.BoxBufferGeometry(20, 20, 20);
var uvs = cubeGeo.attributes.uv;
// originally:
// [0] = 0,1
// [1] = 1,1
// [2] = 0,0
// [3] = 1,0
// convert to:
// [0] = 1,1
// [1] = 0,1
// [2] = 1,0
// [3] = 0.0
uvs.setX(0, 1);
uvs.setY(0, 1);
uvs.setX(1, 0);
uvs.setY(1, 1);
uvs.setX(2, 1);
uvs.setY(2, 0);
uvs.setX(3, 0);
uvs.setY(3, 0);
uvs.needsUpdate = true;

var mat = new THREE.MeshLambertMaterial({
  color: "white",
  map: textureLoader.load(textureURL, function(){
    animate();
  })
});
var mesh = new THREE.Mesh(cubeGeo, mat);
scene.add(mesh);

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>

Answer 3

Answer №2

To construct a cube, you may generate six instances of PlaneBufferGeometries, apply the same material to each, and arrange them accordingly. Incrementally rotate the planes by 90 degrees until achieving the intended outcome. To optimize performance, consolidating these geometries into a single entity using BufferGeometry is advisable.

Answer 4

To construct a cube, you may generate six instances of PlaneBufferGeometries, apply the same material to each, and arrange them accordingly. Incrementally rotate the planes by 90 degrees until achieving the intended outcome. To optimize performance, consolidating these geometries into a single entity using BufferGeometry is advisable.

Answer 5

Answer №3

To bring your creation from Blender into the digital realm, you have a few export options at your disposal. Utilize the THREE.js json exporter or choose a format like OBJ or GLTF for a seamless transition into loading and rendering.

Your focus on maintaining the UV layout as it appears in Blender suggests a need for precision control. In this case, simply importing the model may prove more efficient than attempting to recreate it from scratch.

When utilizing either the three.js .json or .gltf formats, consider embedding textures directly during export. While this may streamline the process, keep in mind that it could lead to slightly less space-efficient storage.

Answer 6

To bring your creation from Blender into the digital realm, you have a few export options at your disposal. Utilize the THREE.js json exporter or choose a format like OBJ or GLTF for a seamless transition into loading and rendering.

Your focus on maintaining the UV layout as it appears in Blender suggests a need for precision control. In this case, simply importing the model may prove more efficient than attempting to recreate it from scratch.

When utilizing either the three.js .json or .gltf formats, consider embedding textures directly during export. While this may streamline the process, keep in mind that it could lead to slightly less space-efficient storage.

How can I apply a texture to a 3D rectangle in THREE.js?

Answer №1

Answer №2

Answer №3

Similar questions

User-generated JSON Object with Date Information

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

Reacting with Node.js: Capturing a selected option from a dropdown menu and storing it in the database

Experiencing difficulties with executing numerous NodeJs queries

Utilize CSS to vertically align buttons

I am encountering an issue where the object I am sending with Next.js is appearing as undefined on the receiving page

Developing a Fresh Settings Tab and Vue Module in Laravel Spark

Execute a JavaScript function when a form is submitted

Ways to verify if an array contains two identical object values?

Optimizing the management of optional post fields in an Express.js application

Setting the maximum width for a JavaScript pop-up box

Populate modal form with database information without using Bootstrap

Managing JSON responses from a server using Javascript

The display of options in React Bootstrap typeahead is not functioning properly

Developing a slideshow with PHP and JQuery

"Trouble with props: List items not showing up after refreshing the page

Traversing JSON data structures regardless of missing keys

Issue with VueJS compilation: JSON data import causing failure

Ways to designate a parent element in Vue Draggable when the element is lacking a child

Efficiently styling table Spans with styled components in React