Exporting JSON models with textures from Blender using THREE.JS

I am currently utilizing the mrdoob Blender Export Plugin (io_mesh_threejs) for exporting to Three JS, but I am encountering an issue where the exported .js or .dae objects do not contain any reference to the texture map files. I am wondering if there is a specific method I should be using to export the object, or if there is a special way I should be applying the map to the object in Blender 2.65 in order for the exporter to include it. If there is no specific way, is it possible to manually add the texture in the JS file?


Blender Prior to Export


Exported JSON Object (without texture reference)

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.65 Exporter",
        "vertices"      : 8,
        "faces"         : 6,
        "normals"       : 8,
        "colors"        : 0,
        "uvs"           : [4],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 1.000000,

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

    "vertices" : [1,-0.988938,-1,1,-0.988938,1,-1,-0.988938,1,-1,-0.988938,-1,1,1.01106,-0.999999,0.999999,1.01106,1,-1,1.01106,1,-1,1.01106,-1],

    "morphTargets" : [],

    "normals" : [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],

    "colors" : [],

    "uvs" : [[1,-0,1,1,0,1,-0,0]],

    "faces" : [43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,0,1,2,3,4,5,6,7,43,0,4,5,1,0,0,1,2,3,0,4,7,1,43,1,5,6,2,0,0,1,2,3,1,7,6,2,43,2,6,7,3,0,0,1,2,3,2,6,5,3,43,4,0,3,7,0,2,3,0,1,4,0,3,5],

    "bones" : [],

    "skinIndices" : [],

    "skinWeights" : [],

    "animation" : {}


}

Code For Loading JSON Object

var object;
var loader = new THREE.JSONLoader();          

loader.load( "./quirk_logo.js", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     object = new THREE.Mesh(geometry, materials);

     object.scale.set(1, 1, 1);
     scene.add(object)
     render();
});

Answer №1

To start, export your model as a .obj file from Blender. Then, continue with the steps outlined in this tutorial to create your desired .json model.

Answer №2

What you seek can be found here.

Answer №3

Here is an example I created for you to explore.

Visit my GitHub repository for more details.

You can view the live demonstration here:

To review the code, please refer to my repository link.

If you are interested in the export options I utilized:

I exported the animations and other elements directly from Blender using the settings outlined in this guide.

Detailed instructions can be found here.

I hope this information proves helpful. Cheers :)

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

Showing JSON data in a table in Laravel 5.8

I am trying to populate my HTML table with JSON results in Laravel 5.8. Here is the data returned from the controller: [[{"logged_on":"2019-06-24 00:00:00"},{"logged_on":"2019-06-21 00:00:00"}]] The success function of my Ajax call looks like this: $.a ...

Error in JSON due to the presence of an unexpected token within the

I am facing a challenge with my PHP code, where I take a list of filenames or empty strings and store them in an array. This array is then converted to JSON and saved in a database successfully. However, the problem arises when this array is also stored wi ...

Populate Android RecyclerView with Images and Text from JSON Data

Hello, I am currently working on creating a RecyclerView list from JSON data that includes image URLs and names. I have spent the past two days searching Google and Stack Overflow for a solution, but I have not been able to figure out how to set the text a ...

Google Sheets Script encounters error: "Exceeded time limit for execution

I'm encountering difficulties when dealing with the "Exceeded maximum execution time" error in Google Sheets while running my script. Despite finding some solutions here, I couldn't get them to work with my script. Any assistance would be highly ...

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Take a look at this: var iconIndex = 0; var icons = ['check', 'chain-broken', 'flag-o', 'ban', 'bell-o']; $('button:eq(0)').click(function() { iconIndex = (iconIndex + 1) % icons ...

Omitting specific modules from the Webpack DLL compilation

I have a universal JavaScript application built with Webpack. I've utilized the DLL plugin to pre-build all my node_modules, but recently encountered an issue when adding a new library. This specific library is causing the DLL build process to fail (d ...

The Angular framework is unable to locate a differ that supports the object '[object Object]' which is of type 'object'

In my Angular project, I am calling an API and receiving the following JSON data: { "id": 16, "poste": "ameur taboui", "desciption": "f", "service": "f", ...

Angular applications with separate, autonomous routers

Imagine having a massive enterprise application divided into multiple independent submodules (not to be confused with angular modules). I prefer not to overwhelm the routing in a single location and wish for these autonomous modules (non-angular modules) ...

Sending parameters from one Node.js function to another in separate JavaScript files

I am currently working on passing function responses between two Node.js scripts. Here is my approach. Index.js var express = require('express'); require('./meter'); var app = express(); app.get('/',function(req,res){ ...

Exploring the world of BDD with Node.js and Angular in an actual web

Currently, I am in the midst of developing an application using nodeJs + yo angular-fullstck, starting with BDD and TDD practices. After searching through multiple resources, I have decided to utilize cucumber-js and Jasmin with the karma runner for testi ...

Displaying JSON Array in ListView - Merging

Although this question has been asked before, my code has some variations which are causing confusion regarding where I need to make changes. My goal is to extract data ("fest_name") and store it in an ArrayList called "festivals", and then display it i ...

React 17 Form not registering the final digit during onChange event

I am currently experiencing an issue with a form that includes an input field of type "number." When I enter a value, the last number seems to be skipped. For example: If I input 99 into the box, only 9 is saved. Similarly, when typing in 2523, only 252 ...

Grid layout showcasing masonry gallery

I've spent some time looking for a Masonry gallery with a grid layout, but couldn't find one that suited my needs. So, I decided to create my own. I implemented a customElement with grid layout, but encountered an issue when trying to assign grid ...

What steps should be taken when handling an AJAX request that returns a false result from PHP?

I need help with a form I'm creating that includes a text box labeled "mobileNo" to search for records in a PHP database using AJAX. When a record is found, it should display "Record found". If no record is found and PHP echoes "Record not found", I w ...

utilize jQuery to load webpage with an HTML dropdown element

Querying the Campaigns: // Getting the campaigns $campaigns = $wpdb->get_results( "SELECT * FROM tbl_campaigns ORDER BY campaignID DESC", OBJECT_K ); // Displaying the Cam ...

Save the result of a terminal command into an sqlite database

When I run a particular shell command in node js, the output is displayed on the console. Is there a method to store this output in a variable so that it can be POSTed to an Sqlite database? const shell = require('shelljs'); shell.exec('a ...

The JSON data is being posted, but the table remains empty and does not populate

UPDATE: Tried modifying the Jquery code to dynamically recreate rows, but it still doesn't work Reorganized my table structure with no success I have a PHP script that encodes my database table into an array. When I echo the json_encode, everything ...

The function provided to the ".run" method did not resolve to a promise

Understanding the error and its reasons, I feel that my particular scenario falls outside the norm. I am implementing Word.run() within another promise structure like this: return new Promise((resolve, reject) => { window.Word.run(context => { ...

What's causing my variables to be returned as null in the alerts?

Why am I receiving null values when alerting my variables? I'm attempting to pass a string stored in a variable from an external JavaScript file back to the main page using alerts. Initially, I suspected that the JavaScript was not fetching data cor ...

I am facing an issue where the PHP header redirection stops working after implementing event.preventDefault() on form submission

After successfully implementing jQuery in my signup page to handle and check the form fields, I encountered an issue where the header("location: ../****.php") no longer redirected me to another page upon clicking submit. Instead, it loaded the new page on ...