Importing an object into Three.js from Blender using JSON_KEYBOARD_SHORTCUT

I'm currently utilizing the Blender plugin to export JSON files, but I've encountered an issue where the texture of my object is not being exported.

The materials section within the JSON file appears as follows:

    "materials" : [ {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "new",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
    "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
    "colorEmissive" : [0.1, 0.1, 0.1],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "depthTest" : true,
    "depthWrite" : true,
    "shading" : "Lambert",
    "specularCoef" : 50,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
}],

Additionally, the JavaScript segment is as follows:

    var loader = new THREE.JSONLoader();          

loader.load( "./try.js", function(geometry,materials) {
    material = new THREE.MeshFaceMaterial( materials );
    object = new THREE.Mesh(geometry,material);
    object.scale.set(0.5,0.5,0.5);
    object.position.x=0;
    object.position.y=0;
    object.position.z=0;
});

loader.onLoadComplete=function(){ //render
}

To create the object, I referenced a tutorial on https://www.youtube.com/watch?v=cUkNOF8eORA. While the method isn't exactly how I would do it myself, it provided a similar starting point for me.

Answer №1

After experimenting, I found that in Blender, you can map a texture onto your geometry using various mesh-UV methods. The .json file created by the exporter will save information about the UV mapping, which is directly linked to the texture image selected.

The JSON file actually supports many features not yet implemented by the loader, such as animations, camera and light properties, and more. Interestingly, one feature I was specifically searching for is missing support from the loader. It appears that the JSON file specification allows for the addition of the image file name for the texture, but both the exporter and loader fail to utilize this information.

Edit: This https://github.com/mrdoob/three.js/pull/5502 pull request indicates that progress is being made on this issue. Perhaps the next version of three.js will address this issue.

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

Discovering how to query for indexed information using SOLRJ is an essential skill for effectively utilizing

Upon navigating to the administration page of my SOLR server, I discovered a specific request being made: http://localhost:8983/solr/documents/admin/luke?wt=json&show=index&numTerms=0 This request retrieves essential information about the index ...

Learn how to pass a JavaScript variable value to a PHP variable effectively

I have created a JavaScript variable and set it to a value. <script> var points = 25; </script> Now, I need to access this value in PHP for some specific reason but I am unsure how to accomplish that. ...

Storing API data in localStorage using VueJS: A step-by-step guide

As I work on practicing building a simple SPA with VueJS, one of my current tasks involves listening to an API and storing certain data in the browser's localStorage. However, my experience with VueJS is still limited, so I'm unsure about how to ...

Loading message displayed in web browsers by banner rotation system

I'm currently working on a banner rotator function that seems to be showing a "loading" message continuously while running. Here is the code snippet for reference: var banners = ['../Graphics/adv/1.gif','../Graphics/adv/2.jpg']; / ...

Experimenting with Jquery hyperlinks beyond the realm of Google Chrome

Is there a way to verify a jQuery link without relying on the inspect element feature in Google Chrome? I initially thought that was the issue because the links failed to load, but even after correcting it, the show function still does not perform the anim ...

Could someone review my coding syntax in JavaScript for utilizing indexOf, split, and looping through multiple inputs to paste the splits?

As someone who is self-taught and codes part-time as a hobby, I am currently working on building a JavaScript/jQuery tool. This tool will allow users to copy rows or columns from Excel and paste them into an online HTML form consisting of a grid of <tex ...

Create a compass application using React-Native

I am attempting to create a compass, but I am unsure how to utilize the Magnetometer data. Below is my Compass class: class Compass extends Component { constructor(props) { super(props); } componentWillMount(){ this._animeRotation = new Ani ...

How to work with multiple values in a C++ JSON array

I have a scenario where I am working with the following body request example: { "users": [{ "userId": 123 }, { "userId": 1234 }] } Given the above example, I am provided with a std::list<UsersId>* VUsers containing user I ...

Guide on populating a series of rectangles in a line based on values stored in an array using d3.js

I have 100 rectangles arranged in a 10x10 square. My goal is to assign colors to the rectangles based on values from an array var avg = [1, 4, 4, 7, 11, 15, 58] I'm facing an issue at the value 4 being repeated and I find the current code quite mess ...

Updating the content with HTML and JavaScript

Hello everyone, I am currently working on a project to change the content of a div using JavaScript for educational purposes. Here is what I have done so far - <div id="navbar"> ... <ul> <li> <text onclick="getWordProcessing() ...

How do I make a component in React delete itself from a page when its internal state changes?

For instance: {!loading ? (data.map((v, i) => { return <Card key={i} title={v.name} image={v.pictures.sizes[4].link}} /> }) These cards are displayed as a series of components on the main screen. Each card ...

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

How can you incorporate a value into a variable in PHP?

Hey there! I'm pretty new to PHP and I've been working on building a program that resembles a spreadsheet. My form consists of columns and cells, allowing users to add or delete rows using Javascript. The challenge I'm facing is automating t ...

Retrieving the JSON data from an API using Laravel

Currently, I am experimenting with APIs and my latest project involves utilizing the Google Directions API within my application. To handle this, I have created a form to collect user input and generate the necessary URI directly in the routes.php file: ...

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

Ajax is updating the initial row of an HTML table while the subsequent rows remain unchanged and retain their default values upon modification

I need help with updating the status of a user, similar to what is discussed in this post. The issue I am facing is that only the first row of the table updates correctly. Regardless of the selected value from the dropdown list on other rows, the displaye ...

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

I attempted to create a button with the id of "clickme" that links to index.html and js/buttonexample.js. Although I could see the button on both the browser and android emulator, it wasn't functioning as expected when clicked. js/buttonexample.js d ...

The error message states that the property "user" is not found in the type "Session & Partial<SessionData>"

I recently had a javascript code that I'm now attempting to convert into typescript route.get('/order', async(req,res) => { var sessionData = req.session; if(typeof sessionData.user === 'undefined') { ...

Achieve automated zooming out using highcharts-ng through code

Currently, I am using Highcharts-ng as seen on https://github.com/pablojim/highcharts-ng Upon inspecting the source code, I have noticed some interesting functionalities in the directive utilizing scope.$on which I can leverage for broadcasting. One examp ...

Building a DOM element using jQuery

I have a function $(document).ready(function () { $("#btnhighlight").click(function () { var htext = $("#txthighlighttext").val(); $("#lstCodelist option").each(function () { var sp = $(this).text(); ...