Struggling to grasp the concept of duplicating the Three.js Editor Import feature

Question

Struggling to grasp the concept of duplicating the Three.js Editor Import feature

For the past few hours, I've been struggling to understand how I can create a .js importer similar to the functionality in the Three.js Editor. I want users to be able to easily load a .js file from a 'file load' pop-up.

Despite searching on Stack Exchange, I haven't been able to find a solution to my problem. It seems like either I'm missing something obvious or the issue I'm facing isn't getting the attention it needs.

I've successfully managed to export meshes and textures from my Three.js file to a 'file.js' format. However, my goal is to be able to reload these files into an existing Three.js scene seamlessly.

After spending hours going through the code in the editor, I still can't figure out how to import a .js file that contains basic geometry and textures. The Editor can do it effortlessly, displaying textures and alpha, but I'm struggling to get it to work for me. It's been frustrating to say the least...

javascript three.js

Answer 1

Answer №1

Finally Figured it Out!

After some trial and error, I decided to utilize the ObjectLoader() example by copying and pasting it. I then modified the file to be loaded from a URL rather than a local file.

function loadCustomScene()
{
    customFile = customLoader.sceneFiles[0];
    customFileURL = URL.createObjectURL(customFile);

    sceneIsLoaded = true;

    var customLoader = new THREE.ObjectLoader();

    customLoader.load(
        // resource URL
        `${customFileURL}`,

        // onLoad callback
        // Here the loaded data is assumed to be an object
        function (object) {
            // Add the loaded object to the custom scene
            customScene.add(object);
        },

        // onProgress callback
        function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

        // onError callback
        function (error) {
            console.error('An error occurred');
        }
    );
}

Answer 2

Finally Figured it Out!

After some trial and error, I decided to utilize the ObjectLoader() example by copying and pasting it. I then modified the file to be loaded from a URL rather than a local file.

function loadCustomScene()
{
    customFile = customLoader.sceneFiles[0];
    customFileURL = URL.createObjectURL(customFile);

    sceneIsLoaded = true;

    var customLoader = new THREE.ObjectLoader();

    customLoader.load(
        // resource URL
        `${customFileURL}`,

        // onLoad callback
        // Here the loaded data is assumed to be an object
        function (object) {
            // Add the loaded object to the custom scene
            customScene.add(object);
        },

        // onProgress callback
        function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },

        // onError callback
        function (error) {
            console.error('An error occurred');
        }
    );
}

Struggling to grasp the concept of duplicating the Three.js Editor Import feature

Answer №1

Similar questions

implementing dynamic navigation bar, when transforming into a dropdown menu using ReactJS

The current registry configuration does not provide support for audit requests when running npm audit

Show all column data when a row or checkbox is selected in a Material-UI datatable

React-Image-Annotate encountered an issue: SyntaxError - The import statement cannot be used outside a module

Encrypting data between two Node.js servers

Launching a modal in a new browser window with the help of JavaScript or PHP

Challenges with handling callbacks in Javascript

Is it possible to verify the user's authentication by confirming the presence of a JWT in their localStorage?

The CORS middleware functions properly with app.get requests, but encounters issues with app.post requests

Is jQuery validation compatible with mobile phone numbers?

Pass data to all routes in ExpressJS

Performing a modulo operation within a v-for loop

What is the most efficient way to cycle through HTML image elements and display a unique random image for each one?

Steps for executing a Node script are as follows:

Subtracting 25% from the width of the web browser

Seeking assistance with transferring jQuery to regular JavaScript and installing on the home screen of an Apple device

Save JSON data in an HTML document or vice versa

Tips for implementing two functions to run within the onClick event handler in React

Trouble with passing the function variable to setState efficiently

Dropzone failing to verify the maximum file limit