Threejs collada loader tutorial: converting a scene into an object3d

Currently working on an augmented reality project and I'd like to incorporate an Object3D into another object for rendering purposes.

Using the ColladaLoader to bring in the object, but the output is a Scene which doesn't quite fit my requirements.

Any tips on how to transform the scene into an Object3D?

Sharing my existing code below:

var cat;
var catObject;

var loader = new THREE.ColladaLoader();

// Changing the axes orientation to avoid the model appearing upside-down:
loader.options.convertUpAxis = true;

// Loading the 3D collada file (cat01.dae in this case) and defining
// the callback function to be executed upon model loading completion:
loader.load( 'assets/cat_v1_model/meshes/cat_v1_model_animated.dae', function ( collada ) {

    // Accessing the collada scene data:
    cat = collada.scene.children[0];

    // Omitting the skin as it's not used in my model:
    // var skin = collada.skins[ 0 ];

    catObject = new THREE.Object3D();

    for (var j = 0; j < cat.children.length; j++) {
        catObject.add(new THREE.Mesh(cat.children[j].geometry, cat.children[j].material));
    }

    catObject.matrixAutoUpdate = false;
    catObject.position.z = 100;

    // Enlarging the model for better visibility:
    /* cat.scale.x = cat.scale.y = cat.scale.z = 3.0;
     cat.rotation.z = 360;
     cat.rotation.x = 180;
     cat.rotation.y = 180;
     cat.position.x = 0;
     cat.position.y = -10;
     cat.position.z = 100;
     cat.updateMatrix();*/

    //arScene.scene.add(catObject);

});

and

// Loading the marker for usage.
arController.loadMultiMarker('jsartoolkit5/examples/Data/multi/marker.dat', function(marker, markerNum) {

    window.onclick = function() {
        arScene.video.play();
    };

    // Creating an object that follows the marker's transformation.
    var markerRoot = arController.createThreeMultiMarker(marker);
    arScene.scene.add(markerRoot);

    for (var i=0; i<markerNum; i++) {

        markerRoot.markers[i] = catObject;
        markerRoot.add(markerRoot.markers[i]);
    }

    // Invoking arScene.renderOn for each frame,
    // performing marker detection, updating the Three.js scene, and rendering a new frame.
    var tick = function() {
        requestAnimationFrame(tick);

        arScene.process();
        arScene.renderOn(renderer);
    };
    tick();

});    

Answer №1

If you want to create a container object using a THREE.Group from the scene object that has been loaded, you can do something similar to this:

function handleLoadedObject( data ){
    // Make a group object to act as a container
    var container = new THREE.Group();
    container.name = 'object-container';
    container.children = data.children;

    // Include it in your current scene
    scene.add( container );
}

loader.load( 'assets/object_model/meshes/object_model_animated.dae', handleLoadedObject);

Answer №2

If you want to create your own collada file (for example, by exporting from Blender), I highly recommend trying out the ThreeJS exporter (check it out here).

Another option is to manually inspect your collada file (since it's just XML) and add your specific object to the scene using this code snippet:

scene.add(collada.children.YOUR_OBJECT);

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

Utilize the onClick event to access a method from a parent component in React

Looking for guidance on accessing a parent component's method in React using a child component? While props can achieve this, I'm exploring the option of triggering it with an onClick event, which seems to be causing issues. Here's a simple ...

Utilize Apollo to retrieve a variety of queries at once

Currently, I'm utilizing nextJS for my frontend development along with Apollo and GraphQL. For fetching queries, I am using the getStaticProps() function. To enhance modularity and maintainability, I have segmented my queries into multiple parts. The ...

Create a new build for testing and debugging using create-react-app

Currently, I am in the process of developing a web application that utilizes a React frontend and is powered by a golang api layer. Although I do not have extensive experience with Javascript, I find myself struggling with the Node build system. I am loo ...

The object function router(req, res, next) is encountering an error as it does not contain the required method for handling the request

I am trying to add a new row to my MySQL database, but I encountered an error message. Here is the scenario: I have set up Passport and hjs in my project. I am passing form data from app.js to a JavaScript file where I aim to insert the data. Object funct ...

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

I have a Drupal form with an AJAX submit. Additionally, I have another jQuery $.get function that sends a request every 2 minutes and inserts the response into an HTML element. The form and this JavaScript code are independent of each other, performing sep ...

Transitioning to the Bootstrap library from the jQuery library with the use of several image modals

After coming across this specific question about implementing multiple image modals on a webpage, I noticed that it primarily focused on javascript and jQuery. However, my project involves utilizing the latest version of Bootstrap, so I'm curious if t ...

props remain undefined even after being assigned in the redux store

I encountered an unusual error related to a reducer called prs when adding or deleting a person in an app. Essentially, this app allows users to add or remove a person with a unique ID assigned to each individual. To start off, here is the parent componen ...

Spinning Earth orbits around the Sun

My goal is to create a 3D Solar system, starting with the Sun and Earth using THREE.SphereGeometry() var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(50, 100, 100), new THREE.MeshBasicMaterial({side: THREE.DoubleSide, map:txt2})); sphere2.position.se ...

Is there a way to automatically scroll the parent page's top when the user navigates within an iframe?

We are encountering an issue with the loading of the iFrame. When the iFrame loads on the client's page, we notice that the page location jumps around and, in most cases, the page focus is lower down the page. This requires users to scroll up to view ...

Numerous asynchronous AJAX requests accompanied by various loading indicators

My ASP.net MVC page is utilizing ajax calls to load data for each of the six divs. To handle the loading indicator, I have created two methods as shown below. $("#divId").loading(); $("#divId").stopLoading(); Here is an example of one of my ajax calls ( ...

What is the best approach for managing multiple HTTP requests in my specific situation?

I have a query about handling multiple HTTP requests in my code to ultimately get the desired result. Here is an outline of my approach: var customer[]; var url = '/api/project/getCustomer'; getProject(url) .then(function(data){ ...

Combining object IDs with identical values to create a new array in JavaScript

i have an array of objects that are a join between the transaction, product, and user tables. I want to merge IDs with the same value so that it can display two different sets of data in one object. Here's my data let test = [ { Transac ...

Unable to access a text file while executing a javascript file as a systemd service

Running a javascript file using node on a Raspberry Pi at startup automatically through a systemd service has been giving me some trouble. I followed a guide similar to this one to set it up. When I manually run the javascript file by entering the comman ...

Exploring the World of Next.js and Sequelize Model Relationships

Greetings to all the problem-solving enthusiasts out there! I'm currently in the process of revamping a previous project using Next.js, and I've hit a roadblock that has me stumped. My current challenge involves establishing an association betwe ...

What's the best way to transfer a variable from a PHP file to a jQuery AJAX file so that it can be used as the URL parameter when sending

I am just starting out with javascript, jquery, and ajax. Unfortunately, I've encountered an issue where my code is not working as expected. Below, you can find a detailed description of my code and the problem at hand. If someone could offer some ass ...

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

Currently studying the Material UI documentation, I came across this statement: It is noted in the example above that we used: import RaisedButton from 'material-ui/RaisedButton'; instead of import {RaisedButton} from 'material-ui&apo ...

Utilize the filtering feature within the Vue select module

I'm struggling to get the select filter to work properly in my Quasar application. When I open the select, there is no list displayed and no value gets selected. Can someone help me understand why it's not working? <q-select v-mo ...

Custom shaped corrugated sheet in three dimensions

While constructing a house-like structure with corrugated sheets, I utilized BoxGeometry to outline the structure and adjusted vertices to create a corrugated sheet wall. I have been experimenting with creating a facade using corrugated sheets in the sh ...

What is the most effective way to show the current date on a webpage: utilizing JavaScript or PHP?

Looking to show the current date and time on a webpage. There are two potential methods to achieve this: (1) Using PHP, for example: <?php echo date('Y-m-d H:i:s');?> (2) ... or JavaScript, like so: <div> <script>document.wri ...

SwitchBase is undergoing a transformation where its unchecked state goes from uncontrolled to controlled. It is important to note that elements should not transition back and forth between un

There is a MUI checkbox I am using: <Checkbox checked={rowValues[row.id]} onChange={() => { const temp = { ...rowValues, [row.id]: !rowValues[row.id] }; setRowValues(temp); }} in ...