Utilizing Three.js to apply various materials on an object loaded through OBJMTLLoader

Question

Utilizing Three.js to apply various materials on an object loaded through OBJMTLLoader

I have two files, an ".obj" and a ".mtl", of a model that I am loading using the OBJMTLLoader. The ".mtl" file specifies the texture to be applied to the model, and three.js successfully loads and renders the model with the applied texture.

However, I want to apply another texture onto the already loaded object. The first texture represents the surface material of the object, while the second texture is a drawing that I want to position at a specific location on the model.

So, my question is: how can I apply a second texture onto an already loaded and textured object?

I noticed that three.js creates an instance of THREE.Object3D, which has a "children" array containing one instance of THREE.Mesh.

When I try to apply a texture to this mesh (mesh.material.map = texture), the initial texture is lost.

I checked out a similar question regarding multiple textures and JSONLoader, but did not find a suitable answer.

I also attempted to use

new THREE.MeshFaceMaterial( materials )

as recommended in another answer without success.

UPDATE:

Despite following @WestLangley's advice to utilize a multi-material object, I am still unable to render one material on top of another.

In my simple demo derived from three.js OBJLoader, I used this link as reference. I employed

THREE.SceneUtils.createMultiMaterialObject

by passing it the cloned geometry of the main mesh loaded from .obj along with two textures - one for the entire surface and another for the front surface of the model.

Unfortunately, this approach didn't yield the desired outcome. Even after adding checkboxes to toggle the visibility of corresponding materials, it was evident that both materials were present, yet I couldn't see the first one beneath the second.

The key aspects of the loading/rendering process are summarized below:

var texture = THREE.ImageUtils.loadTexture('fabric.jpg');
var texture2 = THREE.ImageUtils.loadTexture('table.jpg');

texture2.offset.set(-0.65, -2.5);
texture2.repeat.set(4, 4);

var loader = new THREE.OBJLoader();
loader.addEventListener( 'load', function ( event ) {

  var mainMesh = event.content.children[0].children[0];

  multiMaterialObject = THREE.SceneUtils.createMultiMaterialObject( 
    mainMesh.geometry.clone(), [
      new THREE.MeshLambertMaterial({ map: texture2 }),
      new THREE.MeshLambertMaterial({ map: texture })
    ]);

  multiMaterialObject.position.y = -80;
  scene.add(multiMaterialObject);
});

loader.load( 'male02.obj' );

UPDATE #2

At this stage, I am considering utilizing THREE.ShaderMaterial to apply one texture over another. Though there are some examples demonstrating the usage of a single texture, I remain uncertain about how to display both in an overlaid state and how to precisely position the texture on a mesh.

javascript three.js textures mesh

Answer 1

Answer №1

When it comes to combining images in web development, you have a few options:

One approach is to mix the images using canvas tools in JavaScript and create a single material with a unified texture map.
Another option is to achieve a multi-texture effect by utilizing a custom ShaderMaterial. This involves having two texture inputs and implementing color mixing directly within the shader code.

If you're interested in seeing an example of a basic three.js ShaderMaterial that demonstrates how to blend two textures together, check out this JSFiddle link: https://jsfiddle.net/fvb85z92/.

This code snippet is compatible with three.js version r.150.

Answer 2

When it comes to combining images in web development, you have a few options:

One approach is to mix the images using canvas tools in JavaScript and create a single material with a unified texture map.
Another option is to achieve a multi-texture effect by utilizing a custom ShaderMaterial. This involves having two texture inputs and implementing color mixing directly within the shader code.

If you're interested in seeing an example of a basic three.js ShaderMaterial that demonstrates how to blend two textures together, check out this JSFiddle link: https://jsfiddle.net/fvb85z92/.

This code snippet is compatible with three.js version r.150.

Answer 3

Answer №2

The object you've loaded contains geometry data like vertices, faces, and UV coordinates, as well as material information. To create a ShaderMaterial, combine the textures in a way that works for you and apply it to the mesh using the geometry from the loaded object.

Utilize ShaderMaterial by setting both textures as uniforms and blending them within the shader code.

Start by defining your ShaderMaterial:

var vertShader = document.getElementById('vertex_shh').innerHTML;
var fragShader = document.getElementById('fragment_shh').innerHTML;

var attributes = {}; // custom attributes

var uniforms = {  
  tOne: { type: "t", value: THREE.ImageUtils.loadTexture("cover.png") },
  tSec: { type: "t", value: THREE.ImageUtils.loadTexture("grass.jpg") }
};

var material_shh = new THREE.ShaderMaterial({
  uniforms: uniforms,
  attributes: attributes,
  vertexShader: vertShader,
  fragmentShader: fragShader
});

Then, apply this material to the mesh:

var mesh = new THREE.Mesh(my_loaded_model, material_shh); // Load the object's geometry beforehand

You can use a simple vertex shader:

varying vec2 vUv;

void main() {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
}

As for the fragment shader responsible for blending:

#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D tOne;
uniform sampler2D tSec;

varying vec2 vUv;

void main(void) {
    vec3 color;
    vec4 texA = texture2D(tOne, vUv);
    vec4 texB = texture2D(tSec, vUv);
    color = texA.rgb * texA.a + texB.rgb * texB.a * (1.0 - texA.a);
    gl_FragColor = vec4(color, 1.0);
}

Answer 4

The object you've loaded contains geometry data like vertices, faces, and UV coordinates, as well as material information. To create a ShaderMaterial, combine the textures in a way that works for you and apply it to the mesh using the geometry from the loaded object.

Utilize ShaderMaterial by setting both textures as uniforms and blending them within the shader code.

Start by defining your ShaderMaterial:

var vertShader = document.getElementById('vertex_shh').innerHTML;
var fragShader = document.getElementById('fragment_shh').innerHTML;

var attributes = {}; // custom attributes

var uniforms = {  
  tOne: { type: "t", value: THREE.ImageUtils.loadTexture("cover.png") },
  tSec: { type: "t", value: THREE.ImageUtils.loadTexture("grass.jpg") }
};

var material_shh = new THREE.ShaderMaterial({
  uniforms: uniforms,
  attributes: attributes,
  vertexShader: vertShader,
  fragmentShader: fragShader
});

Then, apply this material to the mesh:

var mesh = new THREE.Mesh(my_loaded_model, material_shh); // Load the object's geometry beforehand

You can use a simple vertex shader:

varying vec2 vUv;

void main() {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
}

As for the fragment shader responsible for blending:

#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D tOne;
uniform sampler2D tSec;

varying vec2 vUv;

void main(void) {
    vec3 color;
    vec4 texA = texture2D(tOne, vUv);
    vec4 texB = texture2D(tSec, vUv);
    color = texA.rgb * texA.a + texB.rgb * texB.a * (1.0 - texA.a);
    gl_FragColor = vec4(color, 1.0);
}

Utilizing Three.js to apply various materials on an object loaded through OBJMTLLoader

Answer №1

Answer №2

Similar questions

Storing various text inputs in a MySQL database

What other methods are available to verify null and assign a value?

Update of input not available

Utilizing ReactJs to Efficiently Parse JSON Data from API Requests

What is the best way to link three asynchronous calls together using jQuery promises?

What causes the error "Why am I receiving a "Cannot read property 'length' of undefined" when looping through a pug template?

What is the process for extracting HTML content using the JavaScript executor?

JavaScript list items experience unreliability once stored in the database

Disabling the ability to select Saturday and Sunday within the Ionic calendar application

Setting up Node.js for production on Nginx: A comprehensive guide

Issues with react-bootstrap component Switches functionality not operating as expected

Handling image errors in jQuery for responsive design queries

What is the best way to retrieve dynamically generated text box values on a JSP page?

What is the best way to create and deliver favicons using Webpack?

I am creating an HTML page that incorporates p5.js, and the text I'm rendering

encountering an issue with the react hook useHistory leading to an error

ui-scroll - unable to return to the start of the list

Automatically assigning a default dynamic value to a dropdown option using Vue.js

Having trouble with Array.filter functionality

Having trouble switching states in React