Troubleshooting UV Mapping Problem in THREEJS JSON Model

After reviewing the json file for a 3D model, I came across the following line:

 "uvs": [[-3.21834,-1.65399,-3.21834,-2.57657,4.21834,-2.57657,4.21834,-1.65399,4.21834,-1.85233,4.21834,-2.7749,-3.21834,-2.7749,-3.21834,-1.85233,4.21834,0.961286,-3.21834,0.961286,-3.21834,0.038714,4.21834,0.038714]]

There are values outside the range of 0 to 1 in the UV coordinates. Typically, UV measurements should not exceed this range. Is there an error in these coordinates? Should they be converted?

The geometry json data is as follows:

{
    "type": "Geometry",
    "materials": [{
        "visible": true,
        "colorAmbient": [0.690196,0.690196,0.690196],
        "depthWrite": true,
        "DbgIndex": 0,
        "mapDiffuseAnisotropy": 1,
        "doubleSided": true,
        "blending": "NormalBlending",
        "wireframe": false,
        "depthTest": true,
        "specularCoef": 50,
        "mapDiffuse": "roof.png",
        "colorSpecular": [0.1,0.1,0.1],
        "opacity": 1,
        "shading": "phong",
        "colorDiffuse": [0.690196,0.690196,0.690196],
        "mapDiffuseRepeat": [1,1],
        "transparent": false,
        "DbgColor": 15658734,
        "mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"],
        "colorEmissive": [0,0,0],
        "DbgName": "roof_png_material"
    }],
    "data": {
        "skinIndices": [],
        "skinWeights": [],
        "name": "RoofGeometry",
        "normals": [0.64452,-0.593982,0.481368,0.494247,-0.563707,-0.661733,0.494247,0.563707,-0.661733,0.64452,0.593982,0.481368,-0.656606,0.597949,0.459639,-0.474654,0.561144,-0.67806,-0.474654,-0.561144,-0.67806,-0.656606,-0.597949,0.459639,-0.02356,0.642933,0.765526,-0.02356,-0.642933,0.765526,0.019044,-0.784814,-0.619373,0.019044,0.784814,-0.619373],
        "metadata": {
            "uvs": 1,
            "bones": 0,
            "materials": 1,
            "normals": 12,
            "generator": "io_three",
            "morphTargets": 0,
            "version": 3,
            "vertices": 12,
            "faces": 10
        },
        "morphTargets": [],
        "vertices": [3.43784,-3.71834,-0.861598,3.43784,3.71834,-0.861598,3.43784,-3.71834,-1.23063,3.43784,3.71834,-1.23063,-0.096621,3.71834,0.184514,-0.096621,-3.71834,0.184514,-0.096621,3.71834,-0.184514,-0.096621,-3.71834,-0.184514,-3.18641,3.71834,-0.940931,-3.18641,3.71834,-1.30996,-3.18641,-3.71834,-1.30996,-3.18641,-3.71834,-0.940931],
        "uvs": [[-3.21834,-1.65399,-3.21834,-2.57657,4.21834,-2.57657,4.21834,-1.65399,4.21834,-1.85233,4.21834,-2.7749,-3.21834,-2.7749,-3.21834,-1.85233,4.21834,0.961286,-3.21834,0.961286,-3.21834,0.038714,4.21834,0.038714]],
        "animations": [],
        "faces": [43,0,2,3,1,0,0,1,2,3,0,1,2,3,43,8,9,10,11,0,4,5,6,7,4,5,6,7,43,0,1,4,5,0,0,3,8,9,0,3,8,9,43,7,6,3,2,0,10,11,2,1,10,11,2,1,43,2,0,5,7,0,1,0,9,10,1,0,9,10,43,1,3,6,4,0,3,2,11,8,3,2,11,8,43,4,6,9,8,0,8,11,5,4,8,11,5,4,43,6,7,10,9,0,11,10,6,5,11,10,6,5,43,7,5,11,10,0,10,9,7,6,10,9,7,6,43,5,4,8,11,0,9,8,4,7,9,8,4,7],
        "bones": [],
        "influencesPerVertex": 2
    },
    "uuid": "2F93879C-96CB-3936-AEFC-CE9840D3057D"
}

Is there a way to obtain the exact points for this model?

javascriptjsonthree.jsuv-mapping

Answer №1

There exists a range of numbers that are less than 0 and greater than 1. In my understanding, uv measurements were expected to fall within the 0 to 1 range.

However, this is not entirely accurate. UV-coordinates can actually be any numbers, and it is ultimately up to the shaders to interpret them correctly. In three.js, parameters such as texture.repeat, texture.offset, texture.center, and texture.rotation are used to map the uv attribute values to texture-lookup values. By default, the values are used as they are.

The outcome for values less than 0 or greater than 1 depends on the wrapS and wrapT settings (detailed in the documentation at ). For example, out of range values may be used for texture-tiling if wrapS/T are set to repeat.

Where is the mistake? Should they be converted?

Therefore, in this scenario, there might not actually be an error. The values could simply indicate an intentional tiling. However, if you wish to change this behavior, you would need to modify the original 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

Using the npm timepicker in Laravel 5.8 with precision and efficiency

Looking for some guidance here as a newcomer to installing packages in Laravel. I'm currently working on implementing the timepicker feature from . In order to do this, I've already executed the command npm i jquery-timepicker. However, I seem t ...

javascriptlaravel-5npmtimepicker

typescript mock extending interface

I'm currently working with a typescript interface called cRequest, which is being used as a type in a class method. This interface extends the express Request type. I need to figure out how to properly mock this for testing in either jest or typemoq. ...

javascripttypescriptjestjstypemoq

Developing a bespoke React component library - encountering an issue with 'react module not found' during Jest testing, as well as using testing-library

I am in the process of creating a bespoke react component library to be shared across various applications. To build this library, I am utilizing rollup and referencing resources such as this blog post along with others: https://dev.to/alexeagleson/how-to- ...

javascriptreactjsjestjsreact-testing-libraryrollup

Changing Three.js from mouse interaction to a random movement pattern

Recently, I came across this interesting website with a background that lights up depending on the movement of your mouse. I was wondering if there is a way to make that illuminated spot move around on its own. If you want to see how it looks, check out th ...

javascriptthree.js

Error in HTML5 video: Unable to access property '0' as it is undefined

I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same g ...

javascriptjquerycsshtml

Positioning a Material UI Menu item underneath its parent element using CSS styling

I have created a Material UI dialog that features some text and an Icon with a dropdown menu option. You can check out the demo here: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js My goal is to properly position the Menu component so that it a ...

javascripthtmlcssreactjsmaterial-ui

Ideal location to detect web browser and display or conceal a division

I am looking to display a div using either the ng-if or ng-show/hide directives if the user accesses the page through a specific browser, such as Chrome/Chromium. However, I am unsure of the optimal location to place this functionality. The JavaScript cod ...

javascriptangularjs

Tips for concealing the angular component depending on a specific circumstance

I have developed a custom directive for validating input. It is designed to check the length of the input. If the length is zero, an error message will be displayed. However, I am facing difficulty in hiding the error message when the input is filled with ...

javascriptangularjsangularjs-directive

Is it possible to prevent certain values from being converted into numeric when using json_encode?

Whenever I utilize PHP (5.4/5.5) along with the json_encode() function, I encounter some difficulties when implementing the JSON_NUMERIC_CHECK parameter. It's a live system, so removing the option is not an ideal solution as it would disrupt the respo ...

phpjsonscientific-notation

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

having difficulties retrieving the attribute value through jquery

I'm currently implementing this method on rowmouseevent. When I use $get(eventArgs.get_id()), the output is: <tr class="normal" data-value="normal" id="ctl00_ContentPlaceHolder1_UserGrid_grdusergrid_ctl00__0" style="height:30px;" /tr> How can ...

javascriptjquery

Pass the ID of a dynamic textbox element to a child window upon clicking a link

One of the challenges I'm facing involves a textbox labeled "Branch Code" that links a branch to a corporate card transaction. At times, there is a requirement to split a transaction among multiple branches. To facilitate this process, I am constructi ...

javascriptc#jqueryasp.netasp.net-mvc-5

Leveraging useEffect and useContext during data retrieval

I'm currently in the process of learning how to utilize React's Context API and Hooks while working on a project that involves using fetch(). Although I am able to make the request successfully, I encounter an issue where I can't retrieve t ...

javascriptreactjsnext.js

Unable to retrieve this object because of a intricate JavaScript function in Vue.js

For my VueJs project, I am utilizing the popular vue-select component. I wanted to customize a keyDownEvent and consulted the documentation for guidance. However, I found the example provided using a mix of modern JS techniques to be quite cryptic. <tem ...

javascriptvue.jsthisarrow-functionsellipsis

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

javascriptcssreactjsbootstrap-4react-bootstrap

Enhance your cloud functions by updating data

Recently, I encountered an issue with a function I wrote that interacts with the Real Time Database. Every time I attempted to write data to a specific node, it would add the complete dataset and then promptly delete everything except one entry. https://i ...

javascriptnode.jsfirebase-realtime-databasegoogle-cloud-functions

Tips for pinpointing parent elements within a group of various sub child elements

CSS - <div class="windows" id="window'+divCount+'"> <p id="windowName'+divCount+'"></p> <p id="para'+divCount+'">Source</p> </div> <div cla ...

javascripthtmljquery

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

javascripthtmlgoogle-chromefind

What is the best way to transform an object into serialized data syntax for use in the jquery.ajax function?

When using my jQuery.ajax function, I am struggling to find a way to convert my object into the serialized format required for sending. $.ajax({ type: 'post', url: 'www.example.com', data: MyObject, success: function(data) { ...

jqueryajaxjsonserialization

The rsuite table does not properly reflect changes in state data

This is the render method that I am working on render() { return ( <Contentbox> <ol> {this.state.data.map((obj) => ( <li key={obj._id}>{obj.name}</li> ) ...

javascriptreactjsrsuite