Issue with Shader UVs in ThreeJS occurs when a glTF model lacks textures

Currently, I am working on importing a glTF model that includes a UV set. My goal is to dynamically assign a texture to it in ThreeJS by injecting shader code into the existing using onBeforeCompile().

So far, everything functions properly. However, when I remove the test texture from the model in Blender and re-export it, the shader encounters a vUv undeclared identifier error. The debugging console shows that the UV maps are defined in the geometry buffer attributes, but they are not being defined in the shader for some unknown reason.

I prefer not to export the model with a texture because this would require loading the texture twice (once during model loading and once dynamically).

If anyone has any suggestions or workaround solutions, I would greatly appreciate it!

Answer №1

It seems like the UV maps are set up but not being properly defined in the shader for some unknown reason.

This issue occurs because default materials only establish the vUv varying when maps are utilized in the fragment shader. Since all maps have been removed from your asset, no varying is specified.

To address this issue, one possible solution is to manually define the varying through onBeforeCompile() by replacing the uv_pars_fragment shader chunk with just varying vec2 vUv;.

Answer №2

Through thorough investigation, I discovered a simple solution:

material.defines.USE_UV = '';

This code snippet effectively activates the UV mapping for the model.

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

Problem with animated text in CSS

I am facing an issue with the code below. It is supposed to display "Dedicated People" when scrolling down, however, it is not working in my browser. Could it be that I forgot to include a reference in the head section? The code works fine in CodePen, but ...

Issues arise when trying to render a component in React after importing the react-bootstrap library

After running npm init and installing react, react-dom, bootstrap, and react-bootstrap packages, I encountered an issue while trying to import components from the react-bootstrap library. The code import Button from 'react-bootstrap/Button'; resu ...

How can I assign several Objects to a single array?

My goal is to save several objects into an array. Specifically, I have five objects named obj1, obj2, obj3, obj4, and obj5. ...

When is the __v value in Mongoose updated?

As per the information found at , the __v version field is expected to change when array elements are shifted from their original position. I conducted a test using the following code (Mongoose version 3.8.15): var mongoose = require('mongoose' ...

What is the process for connecting an Angular .ts file with an existing HTML page?

As I finish up the html pages for my website, I find myself in need of integrating Angular to complete the project. My experience with Angular so far has been with ionic apps, where the CLI generates the html, ts, and css pages. However, I am curious if ...

The issue of underscorejs being undefined arises when trying to load it using both XMLHttpRequest and

I am attempting to dynamically load underscorejs using XMLHttpRequest and eval function function includeScriptSync(scriptUrl) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", scriptUrl, false); xmlhttp.onreadystatechange = function() ...

Close the popover when clicked elsewhere

My code for creating a popover in HTML is shown below: <a data-placement="bottom" style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/>&nbsp;<b>{{UserName}}</b> <div id="popover- ...

Exploring the process of obtaining a collection of JSON sub-items and using Angular's method for finding a match within an array

Question 1 In my program, I am receiving a JSON object called scope.tagSet, which has the structure shown below. { Tags : [ {"TagID" : "ID1" , "TagName" : "Name1"}, {"TagID" : "ID2" , "TagName" : "Name2"}, {"TagID" : "ID3 ...

Why isn't ThreeJS camera.lookAt() working as expected? Am I missing something in my implementation?

When working with Three.js, my goal is to have a camera directed towards a specific point in 3D space. To achieve this, I attempted to use the camera.lookAt function in the following way: camera.lookAt(new THREE.Vector3(-100,-100,0)); Unfortunately, it ...

Vue CLI 3's prerender-spa-plugin is a powerful tool for pre

After attempting to prerender the routes of my SPA using the npm package prerender-spa-plugin with Vue CLI 3, I received a satisfactory output. However, upon running "npm run build," I encountered an error in the index.html file. The error displayed in th ...

What causes an error when attempting to add a new user to the database?

Currently, I am delving into the world of Mongodb. To kick things off, I initiated by executing npm install --save mongoose uuid within the confines of Terminal. The primary objective of my project revolves around storing user information in the database. ...

Error occurs in React Native when trying to import routes due to type mismatch

My react native app is running on my physical device, but I encountered an error when importing routesContainer in my app.js. Can anyone shed some light on why this error is occurring? TypeError: Super expression must either be null or a function [Mon Oct ...

Customizing object joining rules in JavaScript arrays

My array consists of different colored items with their respective types and amounts [ { color: 'blue', type: '+', amount: '1' }, { color: 'blue', type: '-', amount: '1' }, { color: 'blu ...

Console warnings for unknown props in React.js are indicating potential issues within the

Having an issue with my reactJS application that uses react-toolbox Encountered the following error in the console: Warning: Unknown prop `raised` on <a> tag. Remove this prop from the element. Any suggestions on how to resolve this warning withou ...

What is the best way to connect the elements in two separate arrays?

I have a scenario with two arrays and a variable: var Names = ['jack', 'peter', 'jack', 'john']; var Ids = ['1' , '2' , '3' , '4' ]; Also, I have this search varia ...

You can only use a parameter initializer within the implementation of a function or constructor

I recently started learning TypeScript and am currently using it for React Bricks. I've been working on rendering a 3D object with three.js, but I keep encountering the error mentioned above. I've attempted various solutions such as passing color ...

Extracting data from a database using PEAR for Excel: Enumerating columns

One aspect of my website allows users to extract an Excel file using data from a database, with the help of the PEAR library. The Excel table that is generated currently has 32 columns. My main goal is to insert a 33rd column that assigns a number startin ...

Content in the <core-animation-pages> element is extending beyond the borders of the main DIV when the "slide-from-right" effect is applied (Polymer

Check out this quick video I made to demonstrate the issue: I have successfully incorporated core-animation-pages into my web application. I have three different divs that transition using the slide-from-right animation without any problems. However, in d ...

Tips for showcasing an item with the chosen value in a dropdown menu

Below is the object I created: export default { data() { return { language: { "en": { welcomeMsg: "Welcome to New York City" }, "de": { ...

What is the mechanism behind the operation of asynchronous functions within the bcrypt() method in Node.js?

const bcrypt = require('bcrypt'); const saltRounds = 8; const plainPassword1 = "12345"; const plainPassword2 = "56789"; const func1 = async (password, plainP) => { console.log("hashing password"); const h ...