Swapping objects from Blender to Three.js using BlenderSwap

I'm just starting out with Blender and Blendswap. Recently, I downloaded a .blender file from Blendswap and wanted to incorporate it into my three.js scene. After exporting the Blender file as a .obj, I received both a .obj and a .mtl file. I then attempted to import it using the code below. Although there are no error messages, the rendering does not appear. Additionally, I was unsure of the appropriate command to set its position once imported (x, y, z) as I encountered issues with .position.set.

  var santa;

  var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };
  var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
  };
  var onError = function ( xhr ) {
    console.log('Error: ' + xhr)
    };

  var loader = new THREE.OBJLoader( manager );
    loader.load( 'img/santa blendswap.obj', function ( object ) {
      santa = object;
      scene.add( santa );
    }, onProgress, onError );

Answer №1

If the obj file is present in the specified path, this code is expected to function correctly. You have the option to adjust the object's position after it has been loaded.

let santa;
const onProgress = (xhr) => {
    if (xhr.lengthComputable) {
      const percentComplete = xhr.loaded / xhr.total * 100;
      console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
};
const onError = (xhr) => {
    console.log('Error: ' + xhr);
};
const loader = new THREE.OBJLoader();
// Use %20 to encode spaces in the file name. 'img/santa blendswap.obj' should also work
loader.load('img/santa%20blendswap.obj', (object) => {
    santa = object;
    santa.position.set(0, 5, 10); // Position can be set this way or using object.position.set(0, 5, 10)
    scene.add(santa);
}, onProgress, onError);

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

Tips for showcasing the outcome of an SQL query on an HTML page

I need assistance with displaying the output of an SQL query on my website. My server-side is using NodeJs and client-side is VueJs. After querying my database, I received the following result: [ { Time_Stamp: 2019-12-09T11:54:00.000Z, Time_Sta ...

I am looking to enhance the readability of my asynchronous function calls

At the moment, I am handling my Promises by calling an async function and then chaining it with .then(). But I feel like there could be a more readable approach. This is how it currently works: const fetchData = async() => { const response = await ax ...

The JavaScript code malfunctions when I introduce a new HTML tag

I am attempting to create a simple photo gallery using PhotoSwipe. However, I have encountered an issue where certain functions like Previous and Next buttons stop working when I add new HTML elements. Here is the original code: <div class="my-gallery ...

Ways to update the content of a NodeList

When I execute this code in the console: document.querySelectorAll("a.pointer[title='Average']") It fetches a collection of Averages, each with displayed text on the page: <a class="pointer" title="Average" onclick="showScoretab(this)"> ...

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

What approach provides the most effective way to navigate through an NPM Package?

I have an idea to enhance a particular open source NPM package. Although I understand the necessary steps, it would be incredibly beneficial to have the ability to debug the package while it is in operation. Is this achievable? ...

Configuring multiple views directories in Express fails to function as expected

Looking to define multiple views directories in Express. Working with Express version 4.16.3, Node.js version v10.15, and EJS version 2.5.9. app.set('views', [path.join(__dirname, 'views'), path.join(__dirname, 'public/static/&apo ...

When using Next.js, importing multiple components from the index manifest will automatically import everything

CONTEXT: For a project, I have organized all my UI components in a /components directory. Currently, I export each component in its own file using the following format: export function Component1() { ... } and then import them individually into my page li ...

What are the steps for displaying multiple input fields using the onchange method?

$(document).on("change","#noofpack",function(){ count = $(this).val(); for(i=1;i<=count;i++){ $("#packageDiv").html('<input type="text" class="form-control" name="unit_price[]" placeholder="Unit Price" required="">'); ...

Incorrect configuration file for karma

To simplify the configuration of the karma config file, I have utilized variables to store specific parts of the path. var publicfolder = "public" var mypath = "packages/vendor/package/"; files: [ publicfolder+'/assets/libs/jquery/dist/jquery.js&a ...

Unable to Modify TextField Component in React

Is it possible to attach variables to TextField and have those variables deleted as a whole and not editable? Check out the Codesandbox example HERE code <CardContent> <Autocomplete value={values.variable} options={variables} ...

Adjust the color of text, image, and background when the cursor hovers over

Is it possible to change the color of an image on hover by applying a filter like brightness(10)? I tried this, but it whitens all the button, so now I'm not sure how to change the icon color. https://i.sstatic.net/nJL1i.gif One way to do it is: ...

Use the ng-pattern regex to specifically identify instances where a pattern occurs only once

Looking for a string pattern 'abcd' followed by a colon(:) and any number of integers, with the restriction that this pattern cannot be repeated. Here are some examples of valid patterns: - abcd:23415 - abcd:23 And invalid patterns: - asda:4 ...

Guide to modifying text color in a disabled Material-UI TextField | Material-UI version 5

How can I change the font color of a disabled MUI TextField to black for better visibility? See below for the code snippet: <TextField fullWidth variant="standard" size="small" id="id" name=&quo ...

Angular causing WKWebview to freeze

Situation Our Angular+Bootstrap app is functioning smoothly in Desktop on all operating systems, as well as Android and iPhone devices. There are no visible JavaScript errors or CSS warnings. Dilemma However, an issue arises intermittently while using t ...

Vue is having trouble loading dynamic src files, and the require function isn't functioning properly

I'm facing an issue with displaying a dynamic image. When I use the following code: <img :src="src" alt="img"> It doesn't seem to work. However, it works perfectly fine when I use: <img src="../assets/img/banana ...

The Laravel Vue page is failing to load and appears to be stuck in the network tab

I have a question regarding Laravel and VueJS. I developed my Vue project using the command npm run watch and launched my Laravel application with php artisan serve to host the app. However, when I tried to access my website page, it kept loading indefinit ...

Building a Vue application with customized authentication for the Google Calendar API in JavaScript

Struggling with understanding the migration from GAPI to GIS in Vue? Google has provided a helpful document on this topic: https://developers.google.com/identity/oauth2/web/guides/migration-to-gis#server-side-web-apps Attempting to implement code from the ...

Link that causes the regular expression test to hang

My goal is to create a regular expression that can accurately identify URLs. I found the code snippet for this on Check if a Javascript string is a url. The code looks like this: function ValidURL(str) { var pattern = new RegExp('^(https?:\/&b ...

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...