How to use .getObjectById() with JSONLoader in Three.js to access multiple objects efficiently

Is there a way to individually animate meshes within a single .js file exported from Blender using Three.js?

The cube named "Cube" successfully loads, but attempts to select it by Name or Id fail to recognize the variable item1.

loader = new THREE.JSONLoader();

loader.load('engine.js', function (geometry, materials) {
  var mesh, material;

  material = new THREE.MeshFaceMaterial(materials);
  mesh = new THREE.Mesh(geometry, material);
  mesh.scale.set(1, 1, 1);

  var item1 = scene.getObjectByName("Cube");
  item1.position.x = 15;

  scene.add(mesh);
});

A similar issue was found in this unresolved post: Three.js load multiple separated objects / JSONLoader

What is the recommended approach for loading and animating multiple meshes with JSONLoader? Ideally, I would like to load them together in one .js file and choose which ones to animate.

Thank you for your assistance!

javascriptjsonthree.jsblenderloader

Answer №1

To ensure proper identification in your blender scene, it is important to assign unique names to each mesh that you intend to interact with using three.js. By naming meshes individually, you can easily access them using the Object3D.getObjectByName() method in three.js.

Answer №2

Absolutely! Loading an entire scene with multiple meshes from a json file exported from Blender is completely doable! If you want to see the step-by-step process, check out my explanation in this response on the related thread

You can distinguish between the meshes by utilizing the getObjectByName method and control them individually. However, it's crucial to note that the loaded object is no longer just a Geometry. It has now been categorized as a Scene type and must be handled differently.

To load and manipulate the objects correctly, your loading code should resemble something like this:

    loader = new THREE.JSONLoader();
    loader.load( "obj/Books.json", function ( loadedObj ) {
        var surface = loadedObj.getObjectByName("Surface");
        var outline = loadedObj.getObjectByName("Outline");
        var mask = loadedObj.getObjectByName("Mask");
        mask.scale.set(0.9, 0.9, 0.9);
        scene.add(surface);
        scene.add(outline);
        scene.add(mask);
    } );

With the provided code snippet, you'll be able to animate the surface, outline, and mask meshes independently as needed.

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

What is the reason for md-grid-list not being created from an HTTP request?

I am trying to make an HTTP request to fetch a JSON data and then use it to dynamically generate an md-grid-list. However, I am encountering issues with this process. The HTTP request is written in my controller. Interestingly, if I substitute md-grid-li ...

javascriptangularjs

The alignment issue of Owl Carousel card being off-center

I can't seem to get my owl carousel properly centered on my website. I've set up the owl carousel to showcase customer testimonials on my landing page, but it's slightly off to the right and not aligning correctly with the testimonial title. ...

javascripthtmlcsswebcarousel

Working with JavaScript to push numerous results generated by a for loop into an array

I have developed a simple system that identifies users with matching genre interests as a specific user. I am trying to store the results of the for loop in an array, but currently only the last output is being added. I want all matching results to be in ...

javascriptarrayspush

I am seeking to incorporate several Three.js animations into my HTML document, but I am experiencing issues with them

As a professional graphic designer, I am facing an issue with Three.js https://i.sstatic.net/6ZsWa.jpg I have tried several solutions, but none seem to work effectively. In my attempt, I duplicated the imported model and changed its name. Despite trying ...

javascriptthree.js

What is the method to obtain the keycode for a key combination in JavaScript?

$(document).on('keydown', function(event) { performAction(event); event.preventDefault(); }); By using the code above, I am successful in capturing the keycode for a single key press. However, when attempting to use a combin ...

javascript

Tips for pre-selecting default text in ng-select or ng-options component?

I'm new to AngularJS and I've been looking for solutions here without any luck. I have a json file from a controller that I'm displaying in a select element. I want to set the selected value based on the text value. This is my current progre ...

javascriptangularjs

Ensuring the server application is up and running before initiating the mocha tests

This is similar to Ensuring Express App is running before each Mocha Test , but the proposed solution isn't effective + I am utilizing a websocket server In essence, I'm making use of a websocket framework called socketcluster and this represent ...

javascriptnode.jsexpressmocha.js

What are the mechanics behind the functionality of ES6 class instance variables?

I'm encountering an issue with the following code that is not behaving as expected: import React, { Component } from 'react'; let result = null; class MyData extends Component { _getData = () => { fetch(url) .then(response = ...

javascriptreactjsecmascript-6es6-class

Execute JavaScript script once when route changes

I'm currently working on a system where I want to ensure that my animation-based JavaScript code only runs once after the route changes. The issue I'm facing is that when switching between pages and returning to the about page, the scripts are ca ...

javascriptjqueryangularjs

What is the correct method to authenticate a user's ID token in Firestore with Javascript?

I am in the process of developing a react native application and have integrated Firebase, specifically firestore, for data management purposes. My current goal is to incorporate an automatic login feature in my app, where users remain signed in even after ...

javascriptreactjsfirebasegoogle-cloud-firestorefirebase-authentication

Different JSON properties with varying numbers of dots in their names

I stumbled upon some uniquely formatted JSON syntaxes on a website. Essentially, we receive a variable number of properties with dots in the name. Here are two distinct scenarios: case 1: "data" { "SET.Key.count":"0", "SET.Value.count":"0", . ...

c#jsondeserialization

Leveraging redux within your NEXT.JS project

While working on my Next.js application, I have integrated Redux and Redux Saga. I am trying to incorporate server-side rendering for making HTTP requests: export const getStaticProps = wrapper.getStaticProps(async ({ store }) => { store.dispatch(g ...

javascriptreactjsreduxnext.jsredux-saga

executing an SQL query with mysql-npm on the Amazon Web Services platform

Hey everyone, I'm facing a bit of a challenge that I'm struggling to solve. It's kind of a strange issue :/ I've created a Lambda function to connect to a MySQL DB using the 'mysql' node package. When I run the function from ...

javascriptmysqlnode.jsamazon-web-serviceslambda

Leveraging Javascript functions within AngularJS' ng-view

I'm facing an issue with running a JavaScript function in ng-view to display a loading animation before the page loads. I'm in search of a solution and would appreciate your support in resolving this problem. Looking forward to your assistance. ...

javascripthtmlangularjsngroute

Altering the background hue of a div with jQuery based on its existing color

As someone new to jQuery, I have been delving into its intricacies and experimenting with it as much as possible. However, I am facing a time crunch and need to complete this project quickly. My question revolves around a particular issue... I have a link ...

javascriptjqueryajax

How to use image blob in Angular JS?

Working with API endpoints that require authentication for image retrieval. Utilizing a service called authenticatedHttp as an abstraction over $http to manage authentication tokens successfully. Successfully receiving response, converting blob to object ...

javascriptangularjsimageblobsrc

Using PHP for Salesforce API integration

My apologies for my lack of familiarity with salesforce API terminologies. I've recently started developing a connector to interact with salesforce, and I've hit a roadblock. I have a specific requirement where every time a new entry is added to ...

phpjsonsalesforce

Cost-Effective Method for Refining Search Results of an Item

I am working with a JSON file containing movie data and I'm looking to extract only the top ten highest scoring movies: Here is a snippet of the data: { "movies" : { "eraserhead" : { "full_title" : "Eraserhead", ...

javascript

Integrating force refresh functionality into a React application

I currently have a React application running on an apache/PHP server. The React app is set to load on the home path by configuring PHP to load index.html at the / route, which then loads the React app. index.html // .... <div id="react-hook"></ ...

javascriptphpreactjssymfonyroutes

Unable to conceal an Ajax loading image that is dynamically inserted within my web application

I have been working on a project using asp.net web application, and within it, I am attempting to accomplish the following tasks: Calling 2 REST APIs Displaying an AJAX loading image Creating a list of the results Hiding the loading image Below is the c ...

javascriptjqueryasp.netajax