Issue with Three.js Shader rendering improperly on a specific custom geometry mesh surface

Question

Issue with Three.js Shader rendering improperly on a specific custom geometry mesh surface

I am facing a challenge with applying a shader to a single face Mesh in Three.js.

Upon applying the shader material to the mesh, it seems to only read a single pixel of the shader and apply that value to the entire face. I have tested this using the following example:

A single face mesh has been included in each shader example, and the issue persists across all examples.

// defining the geometry (after BoxGeometry in the example)
let triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3( 0.0, 1.0, 0.0 ));
triangleGeometry.vertices.push(new THREE.Vector3( -1.0, -1.0, 0.0 ));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0 ));
triangleGeometry.faces.push(new THREE.Face3( 0, 1, 2 ));

// defining the mesh (after box mesh in the example)
let triangleMesh = new THREE.Mesh( triangleGeometry, material );
triangleMesh.position.x = i - ( params.length - 1 ) / 2;
triangleMesh.position.y = i % 2 - 0.5;
scene.add( triangleMesh );

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

Despite trying this on multiple examples, the issue persists. I am curious about what I might be overlooking.

javascript three.js glsl shader

Answer 1

Answer №1

Here is a snippet of code that demonstrates how to calculate UV coordinates for a geometry in Three.js:

const calculateUV = () => {
    geometry.computeBoundingBox();

    const max = geometry.boundingBox.max,
        min = geometry.boundingBox.min;
    const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
    const range = new THREE.Vector2(max.x - min.x, max.y - min.y);
    const faces = geometry.faces;

    geometry.faceVertexUvs[0] = [];

    for (let i = 0; i < faces.length ; i++) {
        const v1 = geometry.vertices[faces[i].a], 
            v2 = geometry.vertices[faces[i].b], 
            v3 = geometry.vertices[faces[i].c];

        geometry.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)
        ]);
    }
    geometry.uvsNeedUpdate = true;
};

calculateUV();

Answer 2

Here is a snippet of code that demonstrates how to calculate UV coordinates for a geometry in Three.js:

const calculateUV = () => {
    geometry.computeBoundingBox();

    const max = geometry.boundingBox.max,
        min = geometry.boundingBox.min;
    const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
    const range = new THREE.Vector2(max.x - min.x, max.y - min.y);
    const faces = geometry.faces;

    geometry.faceVertexUvs[0] = [];

    for (let i = 0; i < faces.length ; i++) {
        const v1 = geometry.vertices[faces[i].a], 
            v2 = geometry.vertices[faces[i].b], 
            v3 = geometry.vertices[faces[i].c];

        geometry.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)
        ]);
    }
    geometry.uvsNeedUpdate = true;
};

calculateUV();

Issue with Three.js Shader rendering improperly on a specific custom geometry mesh surface

Answer №1

Similar questions

Example of jQuery UI tabs - each new tab opens with a unique script assigned

A guide on transforming JSON data into HTML using Rails

Can JavaScript be executed from the console while navigating between pages?

How can I retrieve text that is enclosed within 2 specific tags and then format the output according to my preference?

Having trouble with the jQuery function not working as expected? Can't seem to identify any errors in the code?

Troubleshooting a Vue.js issue: How to fix a watch function that stops working after modifying

Guide on implementing hover effects in React components

Troubleshooting problem with AJAX returning JSON values

Creating unique page styles using global styles in Next.js

Navigating through the sidebar on Next.js

Reviewing the element names in a jQuery-selected array of objects

Utilize new metadata options to incorporate an external style and script file

Creating and downloading a Word document with Node.js by utilizing officegen

"Enhance your website with autocomplete feature using the power of jQuery 1.4.2 and jQuery UI 1

Guidance on calling a JavaScript function from a dynamically added control

Using Vue.js to connect v-html to a custom CSS stylesheet

Working with MongoDB collections in JavaScript to extract and manipulate array data

Simple steps for retrieving URL parameters with AngularJS

replace the standard arrow key scrolling with a new custom event

Extracting Data from JSON Structures