Exporting Textures with Custom Offsets to GLTF from Three.js Scene

UPDATE:

I was initially puzzled about exporting to obj and mtl formats, but then I stumbled upon the GLTFExporter.js in three.js which allowed me to successfully extract both the geometry and texture from my project.

However, a new challenge arose with the GLTF Exporter as it failed to preserve the offset and repeat settings of the textures when imported into Blender. In Blender, the entire texture covered the MeshPlane instead of just a portion as it did in the Three.js scene.

Does anyone have any suggestions on how I can modify the GLTF Exporter to retain the repeat and offset texture settings during export?

Thank you in advance :)

javascriptthree.js

Answer №1

Having encountered this issue myself, my understanding is that the answer is negative.

Offset and Repeat are features specific to THREE.js. Some other libraries offer similar functionalities, while certain engines employ direct texture matrix manipulation to achieve comparable results.

One solution involves adjusting the UV coordinates of your models before exporting them to incorporate the texture.offset and texture.repeat settings. Essentially, you would multiply each vertex UV by the texture.repeat value and then add the texture.offset. This process effectively embeds these parameters into the model's UVs but necessitates resetting .repeat and .offset to 1,1 and 0,0 respectively in order to properly render the model in THREE.js once again.

For additional insights, here is a relevant thread from the GLTF working group:

https://github.com/KhronosGroup/glTF/issues/107

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

PHP file upload error: Angular JS form submission issue

I am currently working on creating an upload method using Angular and PHP. Here is what I have come up with so far... HTML <form class="well" enctype="multipart/form-data"> <div class="form-group"> <label for ...

javascriptphpangularjs

Retrieving data from Immediately Invoked Function Expressions

I've been working with a closure that looks like this: var Container = (function () { var variable; var changeVariable = function () { variable = 5; }; return { variable: variable, changeVariable: changeVariable }; ...

javascript

Modify the name format using an AngularJS directive

I've been struggling to understand how to effectively write AngularJS directives, even after reading various blogs. The issue I am facing is with an array of names in the format "lastname, firstname". My goal is to create a directive that will display ...

javascriptangularjsangularjs-directive

Utilizing the Vue feature of dynamic route naming within a component's function

Currently, I am working on creating a dynamic view rendering using Vue and Laravel. However, I am facing difficulty in understanding how to pass the dynamic parameter to the component function. Router.map({ '/cms-admin/:page': { comp ...

javascriptvue.jsvue-router

Dynamic x-axis movement with interactive Google Line Chart functionality

I am struggling with implementing Google charts, After reviewing Real-time changing point chart with Google Charts, I realized it is not providing the solution I need. I aim to achieve a similar result as shown in this example: Is there a method for me t ...

javascriptjquerychartsgoogle-visualization

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

javascripthtmlcsstwitter-bootstrapreactjs

What is the reason for the hotel's Object _id not being saved in MongoDB?

Can you assist with troubleshooting this issue? This is the HotelRoom Module: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const HotelRoomSchema = new Schema({ name : { type : String, require : true ...

javascriptnode.jsexpressmongoosemern

The re-assignment of `req.session.variable` in Express-session does not carry over between two different routes

I am currently working on a basic app that allows logged in users to search and book train journeys using Express, MongoDB, Mongoose, and Express-session. The selected journeys are temporarily stored in the req.session.order variable (which I believe is gl ...

javascriptmongodbexpressmongoose

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...

javascriptphphtmlcss

Awaiting fulfillment - Promise remains pending as loop executes queries

I have a scenario where I receive an array containing multiple data elements and need to perform a query for each element in the array. However, this is resulting in a promise pending response. How can I resolve this issue? What could be causing it? getFa ...

javascriptnode.jsexpress

"Developing a JSON object from a Form: A Step-by-

Currently utilizing the Drag n Drop FormBuilder for form creation. My objective is to generate a JSON representation of the form as shown below: { "action":"hello.html", "method":"get", "enctype":"multipart/form-data", "html":[ { ...

javascriptjqueryjsonforms

jQuery blueimp File Uploader: Transferring multiple files to the server on Internet Explorer

After customizing the demo for my Rails application, I encountered an issue with the plugin in Internet Explorer. While it works smoothly on Chrome and Firefox, in IE (all versions) it fails to upload all but one file when multiple files are selected, and ...

javascriptjqueryruby-on-railsruby-on-rails-3file-upload

Tips for utilizing setState to display specific information fetched from an API call through the mapping method

Is there a way to utilize setState in order to render individual data retrieved from an API call? Despite my efforts, all I seem to get is another array of data. Here's the code snippet: const [likes, setLikes] = useState(0); useEffect( async () = ...

javascriptreactjsnext.js

Discovering the minimum and maximum within an array containing objects

I am working with an array of objects that contain latitude and longitude points: var pts = [ { "X": 52.67528921580262, "Y": 8.373513221740723 }, { "X": 52.6759657545252, "Y": 8.374114036560059 }, { "X": 52.682574466310314, "Y": 8.372569084 ...

javascriptarraysobjectmaxmin

I'm looking to instantiate a Backbone collection outside of a script - how can I do that?

I have created my backbone collection named "Events" with a model called "Event". I want to create the backbone collection in this manner: Check out my code below: <script src="<?php echo site_url(); ?>js/backbone-calendar.js"></script&g ...

phpjavascriptbackbone.js

Filtering data with AngularJS upon user clicks

Encountering a perplexing issue at the moment. I have created buttons using ng-repeat and my intention is for them to filter my list when clicked on. However, I am facing an issue where the list fails to filter upon clicking. Here are the buttons: <div ...

javascriptangularjs

Exception: Closing the database connection failed: db.close is not a callable

I have this Node.js application that utilizes MongoDb: const MongoClient = require('mongodb').MongoClient; const demoPerson = { name:'Jane', lastName:'Doe' }; const findKey = { name: 'Jane' }; MongoClient.connect( ...

javascriptnode.jsmongodbtypeerror

Invoke the subscribe function within the encompassing parent function

In crafting a versatile method, I have devised the following code snippet: fetchArticle(loading: Loading): void { this.articleService.getArticleById(this.data.definition.id) .map((response: any) => response.json()) .subscribe((response: ...

javascriptangulartypescriptrxjsobservable

When attempting to pass data to a modal, an error occurs due to props being undefined. This results in a TypeError with the message "Cannot

I'm working on a product listing feature where each item displays some information along with a "more details" button. When the button is clicked, a modal window opens to show additional details of the specific product (using props to pass data betwee ...

javascriptvue.jsvuejs2bootstrap-modalvue-props

Enhancing User Experience with Load Indicator during State Changes in React Native

I'm facing an issue where the page for displaying a single item is loading slowly - I need to delay the page from loading until the object has changed. After checking the navigation params through console log, I can see that the id changes when each b ...

javascriptreactjsreact-native