What is the process for transferring a model and its textures from Blender to three.js?

I am currently facing a challenge with Open/WebGL as I try to display textures/skins from a Blender model in three.js. Despite confirming the successful download of texture files through Chrome's Network tab, they do not appear when rendered.

My approach involves using the webgl_loader_collada.html example to import a 3D model from Blender into three.js. Specifically, I am working with the MESSENGER model offered on the NASA website. For more NASA 3D models, check out their full gallery here.

Here are my current steps:

  • Download and open the model in Blender
  • Select File -> Export -> Collada (.dae)

To visualize the model:

  • Edit a duplicate of threejs/examples/webgl_loader_collada.html to link to the exported .dae file
  • Remove the scaling at line 59.

Upon exporting from Blender with default settings, the rendering appears without any textures. Enabling "Include Material Textures" results in gold coloring on the main part of the model, while other textures are missing and solar panels turn black. Alternatively, checking "Include UV Texture" leads to an all-gray rendering with no textures.

I also experimented with the three.js JS exporter plugin for Blender, but encountered a JS exception stating "Cannot read property 'opacity' of undefined."

Do you think this issue lies in the translation process or the original model itself? If it's the latter, how can I address the problem with the source model or its exported version?

Thanks, - David

Answer №1

Great job on the project, thank you for sharing the link!

When exporting to collada format:

  • Avoid including UV textures
  • Make sure to include material textures
  • Do not duplicate textures (use the provided images)
  • Verify texture paths in the .dae file and use relative paths in the <library_images> tag

I attempted it myself, you can see my version here: https://github.com/vincent/three.js-nasa. However, there are some imperfections, such as the foil effect not utilizing the normal map.

Answer №2

If you're looking to optimize your asset delivery for realtime and web applications, consider using the GLTF format instead of collada. This modern format is widely adopted and perfect for quick loading.

For Blender users, there's a convenient exporter available: https://github.com/KhronosGroup/glTF-Blender-Exporter

After exporting your model as a .glb file, you can easily preview it by dragging it onto this site:

To load your GLTF file in THREE.js, use the THREE.GLTFLoader() method.

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

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

Is it possible to develop in React without using webpack, relying solely on Gulp instead?

Although I appreciate some aspects of Webpack, my enthusiasm for it wanes as the configuration files grow beyond 15 lines. It becomes overly cryptic, difficult to configure, and time-consuming. Therefore, I tend to reserve its use for just a couple of task ...

The process of sending JSON data to a Vue instance

I am facing an issue with my Vue instance where I need to pass JSON data from the backend without using HTTP requests because the data is constant. I attempted to achieve this using props, but encountered some challenges... In the DOM, it appears as <d ...

Execute two tasks simultaneously in two separate workers utilizing the cluster module in node.js

I'm currently diving into clustering with NodeJS. My goal is to have two separate tasks - one handling node-sass and the other managing uglifyjs - each running on a distinct worker using cluster in NodeJS. The code I've implemented seems to be fu ...

Filtering JSON objects in Vue when the API is only returning a limited number of items

Currently, I am retrieving a JSON Object from an API with a limit of 200. The process involves fetching the initial 200 like this: https://testapi.com/posts.json In our application, we have implemented pagination with 10 posts per page. When we reach pag ...

Display one of two divs after clicking a button depending on the input from a form field

My apologies for my limited knowledge in JavaScript and jQuery. I'm attempting to show one of two divs based on input from a form. Specifically, there's a button next to a form field that asks users to enter their zip code to check if they are wi ...

What is the best way to retrieve the IDs of selected items in jQuery selectables?

I have a straightforward question that I've been struggling to find an answer to. When using jQuery selectables, I want to retrieve the ID of the selected list item when it's clicked. Here is an example of my list: <ol id="selectable"> ...

What is the best way to convert Arabic language HTML into a PDF document on the client side?

Utilizing jsPDF and vue js, I successfully implemented a feature to export PDFs. However, I encountered an issue with Arabic characters not displaying properly. Can anyone provide assistance in resolving this problem? ...

How to efficiently monitor and calculate changes in an array of objects using Vue?

I have a collection named people that holds data in the form of objects: Previous Data [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 32}, {id: 2, name: 'Joe', age: 38} ] This data can be modified: New ...

Adding values to an array with the click of a submit button in React JS

I have a unique challenge with creating a form that includes custom inputs. const Input = (props) => { return ( <div> <label className={classes.label}>{props.label} <input className={classes.input} {... ...

React js background image not filling the entire screen

Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...

The 'onChange' event in React is being triggered only once

Currently utilizing material-ui Library Below is my React component: import Checkbox from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import React from "react"; import { withStyles ...

Executing numerous GET requests with varying parameters in AngularJS

Update: My apologies to those who answered, it turns out that the code was correct, but requests were being intercepted and losing all parameters. I am attempting to send repeated HTTP GET requests to a REST API based on the response, using the solution I ...

I recently designed a form using a combination of HTML and JavaScript in order to display different dialogues depending on the number of selections made. Unfortunately, the alert function does not seem to be functioning

The concept is to have users select options and then receive employment sector suggestions based on their selections. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

Label the timeline map generated with the leaftime plug-in for leaflet in R with the appropriate tags

Here is a code snippet extracted from the R leaftime package documentation examples. It generates a map with a timeline that displays points as they appear over time. I am interested in adding labels to these points to show their unique id numbers. Upon ...

Transforming a menu tab into an active anchor when navigating to a particular section

Hello, I have successfully created a JavaScript code that can dynamically add menu tabs into the menu list window.addEventListener("load", () => { const navList = document.getElementById("nav_list") const fragment ...

The catch block is triggered when the dispatch function is called within the try block

It's strange how the code below works perfectly without any errors and records a response once the loginHandler() function is triggered. However, when I include the dispatch function inside the try block after receiving the response, the catch block e ...

Is there a way to determine if an event has been triggered by the original event that initiated it?

Consider a scenario where the following events are in play: $(button).on('mouseup', function (event1) { $(something).show(); $(document).on('mouseup', function (event2) { $(something).hide(); }); }); In this case ...

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. https://i.sstatic.net/xzMVY.png ...

utilizing Nuxt code in Elixir/Phoenix

Overview In my previous work, I combined frontend development with nuxt and backend support from elixir/phoenix, along with nginx for reverse proxy. Looking to enhance the performance of the system, my goal is now to migrate everything to Elixir/Phoenix. ...

Unlocking the potential of resizable bootstrap table columns in React

Currently utilizing a bootstrap table <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> </tr> < ...