Challenges with texture mapping when converting Blender files to Three.js using .JSON format and OBJ files to .JS format

I've hit a roadblock. After scouring all relevant threads I could find, none quite match up with my issue.

The aim is to export and texture map a model in either .JSON or .JS format to render the same as an .OBJ version when viewed through WebGL. The image below illustrates the situation:

Configuration: Windows 7, Blender 2.77, Three.js (downloaded on 5/22/16), Three.js (.json) Blender Exporter, Python OBJ > .JS converter script (convert_obj_three.py)

python convert_obj_three.py -i xxx.obj -o xxx.js

Steps taken:

  • Model exported from WoW ModelViewer as .OBJ
  • Model imported into Blender
  • "Remove Doubles" function used in Blender Edit mode
  • Export from Blender to .OBJ
  • Using Three.js THREE.OBJLoader() script for web testing

Yields a "GOOD" outcome (left case in image)

  • Export from Blender to .JSON (experimenting with various configurations)
  • Testing using Three.js THREE.JSONLoader() script on the web

Results in a "BAD" scenario (middle case in image)

  • Export from Blender to .OBJ
  • Utilizing CMD line Python script for conversion from OBJ to .JS
  • Testing again with Three.js THREE.JSONLoader() script on the web

Ends in a "WORSE" example (middle case in image). This time not only the Hair texture but also parts of skin on the model's face appear distorted.

You may observe slight variations in lighting rendering in each case as well.

Upon inspecting the .JSON and .JS files, I'm at a loss with regards to manual editing if necessary.

Could it be that certain models just won't texture correctly?

javascriptthree.jstexturesblender

Answer №1

The UV mapping for the head section of your model exceeds the acceptable range, which should be between 0 and 1.

To address this issue when loading your JSON model, ensure that you set the texture parameters as follows:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

This solution applies to three.js version r.77

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

As you scroll, a box blocks off half of the screen

Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it. It's like a social media platform where users enter the site and the is_user_logged_in parameter ...

javascriptjqueryhtmlcss

The revalidateTag and revalidatePath features in Next.js are currently not functioning as expected

I attempted to utilize the revalidateTag and revalidatePath functions with Next.js version 14.2.3. The objective was: there is a server action to fetch a list of items. also, there is a server action to add an item. upon successful addition of an item, I ...

javascriptreactjstypescriptnext.jsserver-action

Is there a way to verify if a user has selected the correct answer in a quiz program?

Here we have code segments in ajax, javascript, html, and an xml file. I'm looking to calculate the total score based on user input to determine if they selected the correct answers for a test. I've attempted to figure this out, but I'm str ...

javascript

Calculate the total of JSON objects while eliminating duplicates in an array

Below is an array of objects: const lineItems = [ { "lineNumber": "0", "item": "1496", "itemDesc": "wertyuiasdfghj", "qualityReceiptHold": "N", ...

javascriptarraysjsontypescriptecmascript-6

Tips for handling various mandatory fields for two different user roles within a unified userModel.ts file on a Next.js and MongoDB user registration API platform

Could you please review my code and provide any suggestions for improvement? I have two types of user roles, candidate and business, each with multiple unique fields. My goal is to consolidate all these fields into one userModel.ts file. import mongoose ...

javascripttypescriptmongodbnext.jsmodel

display a new feature immediately upon the user's login

I encountered a scenario where the user is supposed to log in, and upon successful login, another component should be displayed. However, this functionality is not working as expected for me. I have to click the login button again or refresh the page to vi ...

javascriptreactjs

Guide on efficiently removing a user entry from _User via Parse REST API

Having trouble removing a user from the _User table on parse.com and encountering an error. Confident in the correctness of my request syntax, yet receiving the following error: code: 206 error: "Parse::UserCannotBeAlteredWithoutSessionError" Believe th ...

javascriptangularjsauthenticationparse-platform

Is it possible to integrate applications developed using (JS, Node.js, Express, and MongoDB) into a Wordpress site?

After successfully building projects using JavaScript, Node.js, Express and MongoDB, I am now looking to incorporate them into my existing WordPress website. Is it possible to integrate these projects into WordPress, or would it be better to create a sep ...

javascriptnode.jswordpressmongodbexpress

What are the issues surrounding Node.js when it comes to handling Cyrillic encoding?

If we consider the most basic and simplest example from the Node website: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hell ...

javascriptnode.jsexpressutf-8character-encoding

Why is my PHP function not able to properly receive the array that was sent to it via Ajax?

After retrieving an array through an ajax query, I am looking to pass it to a PHP function for manipulation and utilization of the elements at each index. The PHP function in question is as follows: class ControladorCompraEfectivoYTarjeta { public fu ...

javascriptphparraysajax

How to utilize Vue.js for making a GET request by including an ID as a path parameter

My goal is to make a GET request to my backend application and pass an ID as a query parameter. The endpoint I want to use is - GET /api/v1/imports/products_batches/:id. Below is the code I have written: imports.js const fetchSyncedProductsResultReques ...

javascriptvue.jsaxios

Discovering the quantity of identical elements within a JavaScript array

Looking for some assistance in solving a JavaScript problem as I am relatively new to the language: I have an array and I need help in determining the count of identical values. Below is my array: var arr = ["red", "blue", "green", "red", "red", "gray"] ...

javascripthtml

Easily update the title of a webpage in the browser's history using JavaScript

Is it feasible to use JavaScript to modify the title of a page in the browser history even after the page has finished loading? This functionality should work consistently across different browsers, including those that do not support the HTML5 History API ...

javascriptangularjsgoogle-chromebrowser-history

What could be the reason behind Lottie rendering an SVG element outside of its parent div?

After struggling with this issue for an entire day, I'm seeking help to implement an animation using Lottie on my website. The animation format is 1080*1920, but the problem arises when trying to fit it within a div. The dimensions of the div are set ...

javascripthtmlcsssasslottie

Guide on how to switch a class on the body using React's onClick event

There's a button in my code that triggers the display of a modal-like div element. When this button is clicked, I aim to apply a class to the body element; then when the close button is clicked, I'll remove this class. I'm looking for guid ...

javascriptreactjstypescript

Error: Unable to access the 'comments' property of a null value

Encountering an issue when trying to add comments to a post, resulting in the error message: TypeError: Cannot read property 'comments' of null Post routes: router.post("/", async (req, res) => { console.log(req.params); Post.findById(r ...

javascriptnode.jsexpressmongoose

What is the best way to calculate the total sum of the elements in an array of integers while adhering to certain restrictions using JavaScript?

I attempted to find the sum of an array's elements using a specific approach, but unfortunately, the output was undefined instead of an integer. The constraints for the array are that array.length > 0 and array[i] <= 1000. function calculateArr ...

javascriptarrayssumreduce

Array buffers are scheduled by BinaryJs and the Audio API

My node.js server is streaming some ArrayBuffers: var BinaryServer = require('binaryjs').BinaryServer; var fs = require('fs'); var server = BinaryServer({port: 2000}); server.on('connection', function(client){ var file = f ...

javascriptnode.jsaudio

Insert a new row at the top of the AngularJS table

How can I add a row to the beginning in Angular? HTML: <title>Add Rows</title> <link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet"> <script src="https://ajax.google ...

javascriptjqueryangularjshtml

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

javascriptjqueryhtmldatedatepicker