Three.js fails to display materials

I am currently working on exporting a JSON file from Blender and then rendering it using three.js. As my base code, I have used the following reference: https://github.com/jpetitcolas/webgl-experiments/tree/gh-pages/01-rotating-mesh

Initially, when I run the code as it is, everything works perfectly fine. However, upon trying to export the same Blender object using the Blender exporter, I noticed that three.js seems to ignore the materials. You can refer to the image below:

https://i.sstatic.net/ieIde.png

The original export in the example appears correct: https://i.sstatic.net/zaDW4.png

I have utilized the following export settings:

https://i.sstatic.net/jwVEp.png

Here is the exported JSON file which seems to be causing issues: https://pastebin.com/dWWWT2yG

{
"materials": [
   {
      "transparent": false,
      "colorEmissive": [0, 0, 0],
      ...
   }
],
"uvs": [],
"faces": [35, 110, 25, 2, ...],
"vertices": [1, -1.31185, -1, ...],
"normals": [0, -1, 0, ...],
"metadata": {
   "version": 3,
   "materials": 6,
   ...
}

}

I have employed the latest three.js exporter for Blender in combination with Blender version 2.76.

Could you please point out what might be going wrong with my export process?

Answer №1

The issue didn't lie in the export process, but rather with the lighting configuration. By including proper light spots, I was able to resolve the problem successfully.

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

Leveraging asynchronous data in a synchronous manner

I am dealing with tax rate data stored in the database to ensure easy updates when necessary. However, JavaScript's asynchronous nature complicates accessing this data as it requires promises or callbacks to retrieve query results. Is there a solution ...

How can I display several custom markers that are constantly updating on a Google map with MySQL and PHP?

Currently, I am using the following code to generate markers on a Google map by retrieving data from a database. However, the issue I am facing is that it only generates one marker instead of all the markers stored in the database. & ...

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

Disordered dropdown display

I've implemented a class that conceals the 2nd and 3rd dropdown options until there's a click or change in the 1st selection. Current Behavior After choosing "regular" from the dropdown, the execution of $(".dropdown").removeClass(&quo ...

Showcase pictures from a directory in real-time using a combination of jQuery and Bootstrap as the folder continues to fill up with images

Although I am just beginning to learn about UI, I have a question that seems important to me. In my application, there is a background thread that downloads images and saves them in a folder named "images". I want these images to be displayed in the UI as ...

Unable to get the jQuery click event handler to function properly

I am currently working on an asp.net web application in VS 2013. The application utilizes nested master pages, with the main master page containing the following code snippet: <!DOCTYPE html> <script src="http://code.jquery.com/jquery-lat ...

Having trouble connecting the HTML file with the JavaScript file

This is my unique HTML file <!DOCTYPE html> <html> <head> <script src="ll.js"></script> </head> <body> <link rel="stylesheet" href="home.css"> ...

issue with brightcove player's complete event not triggering upon video replay

I have a videoplayer with an event listener added in an onTemplateReady function. Upon completion of the video, I want to replay it: videoPlayer.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, completedCallback); function completedCallback(){ ...

Dealing with numerous validations upon submission in Vue.js

Greetings! I have a requirement to check and validate multiple inputs before allowing the user to submit: <button type="submit" v-on:click="validateErrors()" @click.prevent="submit">Finalize</button> I have crea ...

Attempting to utilize JSON.Stringify on Scripting.Dictionary objects will result in failure

In my current ASP classic project, I have integrated the JScript JSON class available at this link. This class can interact with both VBScript and JScript, closely resembling the code provided on json.org. However, due to team manager's requirement, I ...

What is the best method for changing all materials in a loaded glTF file from mesh basic to mesh phong?

I am working on loading a GLTF model into threejs. The issue I am facing is that all the materials applied to the object use a mesh basic material, which does not interact with lights. Is there a way to convert these materials from basic to one that can be ...

"Step-by-step guide on uploading multiple images to a Node server and storing them in

Hey everyone! I'm currently working on a project using React and MongoDB. Users are required to register and login before accessing the app. Once logged in, they can input their name, number, and images through a form. However, I've encountered a ...

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

Show or conceal input fields depending on the selection of radio buttons

Hello everyone, I am new to JavaScript and currently learning. Can someone please assist me in fixing this code? The required inputs are: radio-button-1; radio-button-2; input-fields-set-1; input-fields-set-2; input-field-submit. My objective is: Upon ...

Discovering the data from a JSON serialization in JavaScript

Within my PrintViewModel list, there is a sublist called Summary. I am working with ASP.NET MVC. @model CRC.Models.PrintViewModel; <label id="lblTotalMonthlyLoanDeduction"></label> I am serializing it using JSON. var obj = @Json.Se ...

Having difficulties implementing horizontal scrolling for the Tabs component in Material UI

I can't seem to enable horizontal scrolling for the Tabs in material UI. Here is the version of Material UI I am using: As the number of Tabs increases, they are becoming wider. I tried to set the width, but it ends up affecting the entire Tabs tab ...

Is it possible to implement localStorage for auto-filling multiple forms simultaneously on a single webpage

I have been exploring a code snippet by Ke Yang that uses localStorage to synchronize text in form fields across different fields. I am interested in implementing something similar. On a page where I have a library of downloadable items, there are approxi ...

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

I found a helpful example on how to change link colors for the current page here. Here is the script I added: <script> // current page highlight $(document).ready(function() { $("[href]").each(function() { if (this.href == window.l ...

Mongoose reminds us that static is not a method

I encountered an error message stating that "product.try() is not a function." Interestingly, when I immediately invoke the try() function, it works fine and node recognizes the model "product." I'm starting to wonder if there's something funda ...

What strategies can be employed to maintain reliable datetime management for a reservation system operating in diverse time zones?

Looking at the big picture: An interesting scenario arises when a hotel owner specifies a time frame for booking reservations at a restaurant (5pm - 10pm). Along with this information, there is also a timezone provided to ensure that dates are displayed i ...