Consistent surface appearance across combined mesh

Is there a way to texture a merged mesh from geometry as one solid piece rather than separately on each individual shape? In the provided code snippet, the textures are applied to separate geometries (refer to image points 1 and 2) - two Cubes and one Cylinder.

Code snippet:

scene = new THREE.Scene();

var texture = new THREE.TextureLoader().load( '1-3-2-5-Bois.jpg' );
var mesh = [], no = 0;
var meshes = [];
var geometry = new THREE.CubeGeometry( 2, 10, 1 );
mesh[no] = new THREE.Mesh( geometry );
meshes.push(mesh[no]);
no++;

geometry = new THREE.CylinderGeometry( 0.5, 0.5, 10, 32 );
mesh[no] = new THREE.Mesh( geometry );
mesh[no].position.set( 1, 0, 0 );
mesh[no].rotation.x = 0;
mesh[no].rotation.y = Math.PI/2;
mesh[no].rotation.z = 0;
meshes.push(mesh[no]);
no++;

geometry = new THREE.CubeGeometry( 5, 10, 1 );
mesh[no] = new THREE.Mesh( geometry );
mesh[no].position.set( -3.5, 0, 0 );
meshes.push(mesh[no]);
no++;
geometry = mergeMeshes(meshes);

var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
...
function mergeMeshes (meshes) {
    var combined = new THREE.Geometry();
    for (var i = 0; i < meshes.length; i++) {
        meshes[i].updateMatrix();
        combined.merge(meshes[i].geometry, meshes[i].matrix);
    }
    return combined;
}

Answer №1

To prevent that seam, it's important to ensure the UVs align properly in the combined meshes. This issue arises when each object has its own unique UV layout. To address this, adjust the faceVertexUvs or faceUvs on the merged geometry to create seamless UV mapping. Be sure to set uvsNeedUpdate after making any changes.

Answer №2

Sharing this solution with the community. Below is the function I implemented to resolve the issue. Make sure to call it after executing mergeMeshes().

function calculateUVs(meshGeometry) {
 meshGeometry.computeBoundingBox();

 var max = meshGeometry.boundingBox.max, min = meshGeometry.boundingBox.min;
 var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
 var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
 var faces = meshGeometry.faces;
 var vertices = meshGeometry.vertices;

 meshGeometry.faceVertexUvs[0] = [];
 for (var i = 0, il = faces.length; i < il; i++) {
  var v1 = vertices[faces[i].a], v2 = vertices[faces[i].b], v3 = vertices[faces[i].c];

  meshGeometry.faceVertexUvs[0].push([
   new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y),
   new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y),
   new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y)
  ]);
 }
 meshGeometry.uvsNeedUpdate = true;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS modules are not loading dependencies such as constants or controllers

While searching for the reason why a properly defined factory is not loading, I came across this question. This led me to contemplate on the concept of services being "defined in an angular module". Consider this example: angular.module('d3', ...

Amcharts does not display the percentage value

I've been working on creating a bar graph using amcharts and I'm trying to show the percentage on top of each bar. Here is the code snippet I have so far: $.ajax({ url: "https://daturl", contentType: "application/json; charset=utf-8", ...

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

What is the best way to design a new class that will serve as the parent class for both of my existing classes, allowing them

I am facing a challenge with my programming classes. I have two classes, "Player" and "Enemy", each with similar methods and properties. I want them to inherit from a parent class that I'll create called "Game Object". How can I approach creating thi ...

Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome. Nevertheless, my requirement is for the first column in these rows to be full-width, while ...

Is there a way to only retrieve the exception message once within the jQuery each function?

Utilizing the "Tempus Dominus Bootstrap 4" for time manipulation has been a crucial part of my workflow. Recently, I encountered a bug while implementing a function to clear all input values upon clicking a specific button. Unfortunately, the clear funct ...

Tips for utilizing field mapping for a nested item in TypeScript

I am working with two separate objects below, let response = { offer: { custom_fields: { job_title: 'engineer' }, starts_at: 'test', ...

Unable to upload photo using Ajax request

I am in the process of trying to utilize Ajax to upload an image, so that it can be posted after the submit button is clicked. Here is the flow: User uploads image -> Ajax call is made to upload photo User clicks submit -> Post is shown to the user ...

troubleshooting Axios errors in React applications

User/Project.js: import React, { useState, useEffect } from "react"; import Axios from "axios"; const Project = () => { const [projectName, setprojectName] = useState(""); const [projectDescription, setprojectDescriptio ...

What could be causing the observable collection to display the correct number of objects, yet have them all appear empty?

I am offering the following service @Injectable() export class LMSVideoResulful { getVideos( enrolmentId : number ) :Observable<Array<Video>> { var x = new Array<Video>(); //https://www.youtube.com/embed/MV0vLcY65 ...

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

Using *ngFor with a condition in Angular 4 to assign different values to ngModel

I am new to Angular 4 and encountering an issue with using *ngFor in conjunction with HTML drop-down select and option elements. My categories array-object looks like this - categories = [ { id:1, title: 'c/c++'}, { id:2, title: 'JavaScri ...

Incorporating video.js into an Angular website application

I've encountered a strange issue while attempting to integrate video.js into my angular app. <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="300" height="264" poster="http://video-js.zenco ...

What is the best way to ensure that all components are updated simultaneously?

I am facing an issue with showcasing relative time using momentjs - it displays 'a few seconds ago', '5 minutes ago', 'an hour ago', etc... upon rendering the HTML. However, the problem is that it remains stuck in that initial ...

Attempting to retrieve information from JSON or JSONP through the utilization of the WOT API

Recently, I utilized the WOT (web of trust) API and encountered a response structured like this: process( { "www.google.com": { "target": "google.com", "0": [ 95, 84 ], "1": [ 95, 84 ], "2": [ 95, 84 ], "4" ...

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

Transferring an array in JavaScript to a different page without relying on PHP

Is there a way to transfer data stored in a JavaScript array to another page without using server-side scripting like PHP? Can this be achieved with JS, jQuery, or similar tools? My goal is to access the array in my JS script on the destination page. Appr ...

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

AngularJS enhanced dropdown navigation bar built using Bootstrap styling

I'm currently learning how to implement Bootstrap, but I've run into an issue. I created a dropdown in the navigation bar, but when I clicked on it, the dropdown didn't collapse as expected. The class="dropdown" didn't change to class= ...