Import a precise model from a glb file

Greetings! I am relatively new to working with ThreeJS and just getting the hang of it. After going through some tutorials, I have successfully managed to load glb files and render them in my browser with ease.

Recently, I downloaded a GLB file from that showcases 8 different human bodies. However, I am interested in displaying only one body at a time depending on specific scenarios.

My main query is: is this feasible? Can the individual models within the file be selected and added separately, or do I need to edit the glb file using software like Blender for this customization?

I attempted to access the individual models by using o.Children after loading the glb file, but unfortunately, I was unsuccessful. Additionally, when I checked o.scene.length, it showed as 1.

javascriptthree.jsmodel3dwebgl

Answer №1

Why don't I just figure out the solution myself?

If you follow this link, you'll find a detailed explanation of how to load the file. It even includes an example on how to load individual objects.

You can use this command to select a single object:

 const gltfLoader = new GLTFLoader();
  gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
    const root = gltf.scene;
    cars = root.getObjectByName('Cars');
    scene.add(cars)
});

By using "scene.add(cars)", only that specific object will be added to the scene.

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 behind the jQuery JSON parser requiring double escaping for backslashes?

I'm struggling to comprehend a strange aspect of the JSON data format. Here's the issue: I have a string with a Windows directory path, where backslashes are escaped. However, the jQuery JSON parser seems to require double escaping for some reas ...

javascriptjqueryjsondata-structures

JSON only retrieve the corresponding data

I am looking to send a JSON object back to Postman without including a "title" like: { "name": { "name": "Three Rivers Campground", "lengthLimit": 25, "elevation": 6332, ...

javascriptnode.jsjsonserver

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?

Looking for some assistance in verifying that the date in a request is exactly Today. I've tried various methods from the documentation, but haven't achieved the desired outcome yet. Calling out to any helpful souls who can guide a junior QA thro ...

javascriptjsonmappingwiremock

Encountering a 404 error while accessing my meticulously crafted express server

After ensuring that the server is correctly set up and without any errors related to imports or missing libraries, I utilized cors for development purposes. A 404 error persisted even after attempting to comment out the bodyparser. https://i.stack.imgur.c ...

javascriptnode.jsexpress

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net

Issues encountered while attempting to update data in angular2-datatable

Once the datatable has been rendered, I am facing an issue where I cannot update the data. I'm utilizing angular2-datatable. In my appcomponent.html file: If I try to update 'data2' in my appcomponent.ts file as shown below: this.httpserv ...

javascriptgoogle-mapsangulartypescriptdatatable

Set up a custom JavaScript function to automatically refresh a webpage

I am in the process of setting up a JavaScript function to refresh on a specific webpage. The website utilizes an overarching JS and CSS framework, but I desire this particular function to load in a unique manner. The JS function within the framework dyna ...

javascriptjquerycss

How do I delete an element from an array in a MongoDB database using Node.js?

When running this query in ROBO 3T, the code executes correctly. However, when attempting to run it in nodejs, the code is not functioning as expected. //schema model const mongoose = require('mongoose'); const imageSchema = mongoose.Schema({ ...

javascriptnode.jsmongodbmongoose

Getting AJAX parameters from Angular in Node/Express Js

I am encountering an issue with my factory, which sends an ajax userId call to my node server. usersModel.getUser = function(userId){ return $http({ method: 'GET', url: 'http://localhost:3000/users/details', ...

javascriptajaxangularjsnode.js

The AJAX function is failing to return false

I found this code snippet in my index.html file: <form> <input onkeyup="firstnamecheck(this.value)" type="text" name="firstname" id="Start" class="Inputs" /> <button type="submit" name="Murad" id="tester" title="Register">Register</b ...

javascriptajax

Encountering a top-level-await issue while utilizing the NextJS API

Currently, I am in the process of creating an API using NextJS and MongoDB. To start off, I have set up some basic code at the beginning of the API file: const { db } = await connectToDatabase(); const scheduled = db.collection('scheduled'); Fol ...

javascriptnode.jsreactjsnext.js

What are the steps to make a basic slider with jQuery without using plugins?

<script> const animateImages = function(){ $("#slider").animate({"left":"-=1775px"},10000,function(){ $("#slider").animate({"left":"0px"},10000); animateImages(); }); }; animateImages(); </script> I incor ...

javascriptjqueryloopsanimationimage-gallery

The Bootstrap navigation menu is functioning properly when opening, but has an issue when attempting

Creating a mirrored version of an HTML file using NuxtJS, I've included the following code snippet in the Navbar component for my NuxtJS project. <template> <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" ...

javascripthtmlvue.jsbootstrap-4nuxt.js

Having trouble with the copy to clipboard function of Prism JS on my NextJs application

I am facing an issue while trying to integrate a copy to clipboard plugin from prismjs into my next.js app. I have searched for documentation on this but couldn't find any relevant information. Despite going through various websites and implementing t ...

javascriptnext.jsprismjs

Tips for displaying user-entered information from a form after submitting it with PHP

How can I display the email in the email text input field with this code? It doesn't seem to work correctly when there is a failed login attempt. value= "if(isset($_POST['submit'])){ ?PHP echo $_POST[''email']?>"; ...

javascriptphpajax

Using Plotly.js to generate a visually stunning stacked and grouped bar chart

Is there a way to generate a bar chart on Plotly.js that features both grouped and stacked bars? Ideally, I am looking for a structure similar to the one shown here: Barchart with stacked and grouped charts ...

javascriptplotlyplotly.js

Adjust the wait time for sliding on the jQuery rcarousel

I am currently utilizing rcarousel for my website and I would like to adjust the duration of time that each slide is displayed. At the moment, each slide stays up for just a few seconds, but I want to extend this so that each slide remains on screen for at ...

javascriptjqueryhtml

Having trouble with Angular router.navigate not functioning properly with route guard while already being on a component?

I am currently troubleshooting an issue with the router.navigate(['']) code that is not redirecting the user to the login component as expected. Instead of navigating to the login component, I find myself stuck on the home component. Upon adding ...

javascriptangulartypescriptangular-routingangular-components

Custom React component - DataGrid

Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...

javascriptreactjstypescriptasp.net-corereact-redux

Exploring the Use of async: false in jQuery

Can you tell me if there is a distinction between these two settings: $.ajax({ type: "POST", traditional: true, url: '/adminTask/doAction', async: false, <<<<<<<<<<<<<< HERE data: p ...

javascriptjqueryajax