Loading multiple separate objects in Three.js using the JSONLoader technique

Is it feasible to import a scene from Blender into JSON format and then differentiate between two different cubes within the scene?

I want to be able to distinguish them, for example, to have one cube rotating while the other moves.

Thank you in advance!

Denv

Edit +++

Thanks for your response!

If I load two cubes from one JSON file:

loader.load("untitled1.js", function(geometry, materials) {  
        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.set( 10, 10, 10 );
        mesh.position.y = 0;
        mesh.position.x = 0;
        scene.add( mesh );       
});

How can I manipulate the position of the first cube?

mesh.getObjectById(0).position.x = 15;

It doesn't seem to be working as expected.

Thank you!

javascriptjsonthree.jsblender

Answer №1

Absolutely! Loading an entire scene from a json file exported from Blender is completely achievable!

I successfully accomplished this using the following steps: (Utilizing three.js r80)

  1. Start by naming your various objects in Blender as shown in the Outliner image below.
  2. Next, export the file using the Three.js json exporter add-on for Blender, ensuring to select the Scene checkbox like in the illustration provided:

https://i.sstatic.net/lfNNo.jpg

  1. The json file will now contain all the meshes from Blender's Outliner, which you can confirm by examining it with any text editor. The selection status of the meshes does not matter.

  2. Note that the parent object (or root) no longer holds a Geometry type - it has been updated to an Object type. To access the children objects (of type Mesh), utilize the getObjectByName method on the main object as demonstrated in the code snippet below:

    jsonloader.load( "obj/Books.json", function ( loadedObj ) {
    var surface = loadedObj.getObjectByName("Surface");
    var outline = loadedObj.getObjectByName("Outline");
    var mask = loadedObj.getObjectByName("Mask");
    // View the object properties in console:
    console.log(loadedObj);
    console.log(surface);
    console.log(outline);
    console.log(mask);
} );

    By inspecting the browser's console, you will see the correct objects assigned. From here, you have the freedom to manipulate the child objects independently (such as changes in position, rotation, materials, etc.)

https://i.sstatic.net/vSeDQ.jpg

Answer №2

Every loaded item comes with a unique .id, allowing you to easily locate it using Object3D.getObjectById() and apply transformations 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

Guidelines for sending JSON Data via Request Body using jQuery

I'm not well-versed in jQuery, so consider me a beginner. Here's my code that is not correctly handling JSON data submission via Request Body. <!doctype html> <html lang="en> <head> <title>jQuery JSON Data Submission ...

javascriptjqueryajaxjson

Dynamic tab index in Vue-form-wizard based on the route

I'm looking to enhance my tab navigation by incorporating URLs. With the Tab-content property route, I can specify an anchor that will be displayed in the URL. By using the Form-wizard property start-index, I can easily navigate to the correct tab. ...

javascripthtmlvue.jstabs

Creating a dynamic form in Django that allows users to input text and insert images using AJAX technology

My goal is to develop a website for creating articles that go beyond the standard models.TextField setup commonly used with Django. I want users to have the ability to add an arbitrary number of text and image fields to their articles, while also ensuring ...

javascriptpythondjangoajaxdjango-forms

showcasing a set of div elements by using forward and backward buttons

I am dealing with 5 divs that have text content inside. To navigate through each div, I have implemented a back and next button system. <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class ...

javascriptjqueryhtmlcss

Identifying bullet impacts in three-dimensional.js

After researching various solutions for collision detection, I have successfully implemented a method for one object colliding with many. However, I am now faced with the challenge of handling collisions with bullets, where there are multiple objects that ...

three.jscollision

Place an image at the top of the canvas at a specific location

Currently, I am in the process of reconstructing this specific website My approach involves working with React (similar to the aforementioned site) and utilizing the same cropper tool that they have implemented. For cropping, I am incorporating react-imag ...

javascriptreactjstypescriptcanvas

Assigning a click event to an element within CKEditor

Looking to add a click event to an element in ckeditor4-angular for custom functionality <div class="fractional-block" id="fractional-block"><span>5</span><svg height="5" width="100%"><line ...

javascriptangularckeditorckeditor4.x

Why Won't My PHP Form Submit on a Bootstrap Website?

I'm struggling with validation and need some assistance. I have a Bootstrap form embedded within an HTML page and a PHP script to handle the submission. However, whenever someone clicks on Submit, the page redirects to display my PHP code instead of a ...

javascriptphpjqueryhtml

Is there an alternative method to incorporate the 'environment.ts' file into a JSON file?

In my Angular application, I need to import assets based on the env configuration. I am attempting to extract the patch information from environment.ts and save it into my assets as a json file. However, I am unsure of the proper method to accomplish this. ...

jsonangulartypescriptangular9

Javascript alert: An issue has been detected when attempting to open a URL along with the user's input through Javascript

Having trouble with my javascript codes... I'm trying to create an input box and submit button. Whatever the user inputs in the box should be added to the default web URL, but it's not functioning as expected. The issue I'm facing is that ...

javascriptjquerywindow.location

Tips for altering the color of string outputs

Can you help me modify a function to display different colors based on the output? For instance, I want it to show in orange if the result is too low, and in red if it indicates obesity. bmiCalculation() { var weight = parseInt(this.currentWeight); ...

javascriptvue.js

Warning of superfluous escape character when executing 'npm start' on a React application

I have encountered a warning while running my React app using npm start. The warning appears in the terminal and reads as follows: Line 24: Unnecessary escape character: \[no-useless-escape The warning is related to the following code snippet: va ...

javascriptnode.jsreactjsnpmecmascript-6

Obtaining a complex object from a Checkbox set in AngularJS through the use of ngModel

Hey there! I've been searching on Stack Overflow regarding this topic, but I haven't found a solution that matches exactly what I need. If you want to take a look at the code, here is a JSFiddle link for reference: http://jsfiddle.net/gsLXf/1/ ...

javascriptangularjscheckboxangular-ngmodel

The correct method for removing NPM packages (Npm Uninstall versus Updating package.json)

I am facing the challenge of removing multiple libraries from my project. I am concerned about potentially causing issues by removing a library that is a dependency for another library. What is the safest approach to remove these libraries? I have two op ...

javascriptnode.jsnpm

Issue: The module 'vue-loader-v16/package.json' cannot be located

Just transitioning from React.js to Vue.js and encountering an issue with the Vue loader that didn't occur initially. However, starting the server crashes the app from the second time onwards. npm run serve > <a href="/cdn-cgi/l/email-protecti ...

javascriptvue.jsvuexvue-routervue-loader

If a user enters an incorrect path, the goal is to automatically redirect them to the homepage while displaying the correct URL in AngularJS

When the URL is manually edited, the webpage displays the same content with a different URL structure. For instance, http://www.example.com/# and http://www.example.com/#/abc both show identical content. I would like to implement a redirect for any edite ...

javascriptangularjs

When using Javascript's querySelector, often times it returns null

Here is the HTML code I am working with: <button class="pop-btn"> Pop </button> While I was able to style this button using CSS, I encountered a problem when trying to select it in Javascript: const Population_div_Button=document. ...

javascripthtmlcss

What is the best way to effectively utilize bootstrap and JavaScript together?

I've been trying to implement some JavaScript on top of Bootstrap 5, but it doesn't seem to be working. I'm not sure if I'm doing something wrong with the JavaScript itself, or if there's an issue with how it's interacting wit ...

javascripthtmlcssbootstrap-5

Analyzing component variable using Jasmine testing

When using spyOn in a jasmine test to monitor a function call from a service that returns an Observable, I encountered the error "unexpected token U JSON." This error originated from this line within the component: this.config = JSON.parse(localStorage.g ...

javascriptangularkarma-jasmine

Page refresh enhances hover effect style

Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...

javascripthtmlcss