What is the best way to transfer my object along with its unique textures from Blender to ThreeJS?

I've been using the STL Loader in three.js to import objects from Blender, but I'm facing an issue where the textures are not appearing. I suspect it has something to do with the MeshBasicMaterial of the object. I attempted to switch it to Phong material, but then the object just turned black.

This led me to wonder, instead of changing the material, why can't I retain the textures/features from Blender when loading the object from STL Loader to three.js? Is there a way to preserve the texture? Are there any tutorials available for this?

Thanks in advance!

EDIT:

Here is a snippet of the code where I exported the Blender object with textures to a three.js .js file. The object loads in the viewer but appears black without any textures. I'm unsure how to fix this issue. I followed an example that utilized an inn for texture (hence the name, which I haven't changed yet).

var Viewport = function ( signals ) {
...
    // Remaining code remains the same
...
javascriptthree.jswebgl

Answer №1

As noted by mr doob, STL files focus on geometry rather than color or texture. To better understand this, I recommend exporting a basic object from Blender with textures using the three.js exporter. For an example, visit threejs-and-blender. Take a look at the source code of the threejs demos to see which files are being used, including references to images.

Once you have this working, tackling more complex models will become easier. Additionally, if you prefer not to share your original model, using a simple cube for debugging should suffice.

Answer №2

Even though I didn't utilize the JSON Loader, I decided to give the Collada Loader a shot. Interestingly, my model maintained its textures offline when I imported it in the Webgl loader collada example. However, within this current 3-D viewer, my model appeared completely black. It wasn't until I added a light that the textures finally appeared.

It seems that just like with the JSON Loader, I will also need to include a light source within my 3-D viewer in order for the model's exterior to be visible.

Answer №3

When working with Blender v 2.68a, I encountered a similar issue. However, I was able to resolve it by upgrading to Blender 2.71.

After upgrading to Blender 2.71, I imported the same .stl file that previously appeared black on WebGl. Without making any changes to the export settings, I exported the file from Blender. Upon reloading it in WebGl, the model was now displayed in full color!

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

Regular expression for matching zero's following a decimal

I'm currently working on a regex method to validate decimals that only allow 2 numbers after the decimal point. For example, it should return true for 1.00 and false for 1.000, which it currently does. However, I also want it to return false for value ...

javascriptjqueryregex

After successfully building with Vite, an error occurs stating "TypeError: can't convert undefined to object." However, during development with Vite, everything functions flawlessly

Currently, I am utilizing Vite in conjunction with React and Typescript for my project. Interestingly, when I execute 'vite dev', the live version of the website works flawlessly without any errors showing up on the console. However, things take ...

javascriptreactjstypescriptmaterial-uivite

What's the best way to display a bootstrap modal window popup without redirecting to a new page?

I am having trouble implementing a modal window that will display validation errors to the user when they submit a form. Currently, the window is opening as a new view instead of overlapping the existing form's view. How can I adjust my code so that t ...

javascriptc#ajaxasp.net-mvcasp.net-core

Issue with unit testing a ViewportRuler in Angular 2 Material Library

I am currently working on an Angular2 component that includes a tab control from @angular/material. During testing of my component (refer to the simplified code below), I encountered the following error: Error: Error in ./MdTabHeader class MdTabHeader - ...

javascriptangulartypescriptkarma-jasmine

Is there a way to directly display all the content in pagination format without a print preview option?

I have been tasked with implementing a feature that involves displaying content using pagination and allowing users to print all the content at once with a single click on a print button. However, I am currently experiencing an issue where clicking the pri ...

javascriptangularjspagination

Is this method an effective way to create global states across React components?

After delving deep into props-drilling while coding a full-fledged web application with React, I've decided to explore using React 'contexts'. Following the guidelines in the React documentation, I am implementing an approach to make my stat ...

javascriptnode.jsreactjsreact-hooksreact-context

Guide to resetting a CSS animation with pure JavaScript

My flexbox contains 4 images, each triggering an animation on hover. However, the animation stops if I hover over the same image again. I have tried various JavaScript solutions found online to restart the animation, but none seem to be working for me. S ...

javascripthtmlcsshover

jQuery functions not functioning properly when triggered by an event

I encountered an issue with my page using jQuery and Bootstrap. Everything was functioning properly until I tried calling a function on an event, which resulted in the console showing an error message saying $(...).function is not a function. For example: ...

javascriptjquerytwitter-bootstrap

a pair of browser windows displaying a web application built with ASP.NET MVC

We are currently in the process of developing an ASP.NET MVC web application for internal use within our organization. Our users' productivity can greatly benefit from having a larger screen space, which is why we have decided to provide each user wit ...

c#javascripthtmlasp.net-mvc

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

javascriptnode.jsnpmgulpnpmjs

Sending images as a base64 string from a Titanium app to a Ruby on Rails web service

I am encountering an issue when trying to upload an image from an app that has been converted into a base64 string to a Ruby on Rails server. The app is developed using Titanium. However, after retrieving and decoding the image string back into an image, ...

javascriptruby-on-railsimage-processingtitaniumbase64

Connecting two sets of data from a mongoDB database using vue.js

Hey there, I'm a newcomer to vue and mongodb. I've set up two collections - one for storing user details and the other for business details. When a business registers through a form, their information is saved in mongodb. Now, I've created a ...

javascriptnode.jsmongodbvue.jsnpm

Using Input Mask with TextField Component in Material-UI with React Hook Form

Currently, I am trying to utilize the MUI's TextInput component alongside the MaskInput component from react-input-mask and react-hook-form. Despite everything appearing to be functioning correctly, an error message related to using refs keeps popping ...

javascriptreactjsmaterial-uireact-hook-form

What is the best way to find out if an array index is within a certain distance of another index?

I'm currently developing a circular carousel feature. With an array of n items, where n is greater than 6 in my current scenario, I need to identify all items within the array that are either less than or equal to 3 positions away from a specific inde ...

javascriptarraystypescriptalgorithm

Establish individual states for every dynamically created component using the same handler function

I have a component in React built with Material UI, where the child component (Paper) is dynamically generated depending on the number of items in an array. The challenge I'm facing is changing the elevation property of the Paper component when it&ap ...

javascriptreactjsmaterial-uireact-hooks

Firefox 44 experiencing issue with HTML 5 Video playing sounds unexpectedly

There has been an unusual observation of Firefox playing the sounds of all embedded videos on a page, even when the elements themselves are not actively playing. Clicking play on the video controls triggers new sound and video playback to start. All video ...

javascriptfirefoxvideo

What sets MongoDB Shell Scripting apart from JavaScript?

I'm currently working on a homework assignment and I prefer not to share my code as it would give away the solution. However, I can provide some generic snippets. I must admit, I am a novice when it comes to javascript and Mongo, and I only learned ab ...

javascriptnode.jsmongodbmongo-shell

Issue with date: date.toLocaleTimeString function is invalid

I'm currently working on creating a time display component using hooks, but I'm running into an issue with the error message "TypeError: date.toLocaleTimeString is not a function." As a newcomer to this technology, any guidance would be greatly a ...

javascriptreactjsreact-hooks

Tips for transferring the name field to a different page upon clicking

There are two pages in my project - the first one is called ItemMenuPage and the second one is called CartPage. The functionality I am trying to achieve is that when a user clicks on any item name on the ItemMenuPage, it should navigate to the CartPage, wi ...

javascriptangularjsionic-framework

Revamp the sequence of divs using jQuery

<div class="example first">111</div> <div class="example second">222</div> <div class="example third">333</div> Can the order of these divs be changed using jQuery? I am looking to get: <div class="example second"&g ...

javascriptjqueryhtmlcss