End the rendering process in Three.js

When loading a large obj file on computers that do not support WebGL, the process can become too slow. To address this issue, I am looking to upload a lighter object before and after the complete object loads. However, I need a way to pause the rendering process while rotating the view if the complete object is still processing. Is there a function that can help solve this problem? Thank you!

This is my code:

    var renderWire = function () {
        renderer.render(wireScene, camera);
        render();
    };
    var render = function () {
        renderer.render(scene, camera);
    };

    $(document).ready(function() {
        $(document).keypress(function(event) {
            switch(event.keyCode) {
                case 100: //right
                    //rotation
                    break;
                case 97: //left
                    //rotation
                    break;
                default:
                    //not set
                    break
            }

            //here I need to stop the current rendering process and start a new one

            renderWire();
        });
    });

Answer №1

You should load one object at a time to easily control the loading process. It seems like you have 3 objects to load.

var firstTexture = THREE.ImageUtils.loadTexture( "images/firstTexture.png", undefined, firstObject );
function firstObject ( texture ) {
            var material = new THREE.SpriteMaterial( { map: texture } );
            firstObject = new THREE.Sprite( material );
            scene.add( firstObject );
            var secoundTexture = THREE.ImageUtils.loadTexture( "images/secoundTexture.png", undefined, secoundObject );
        };

        function secoundObject ( texture ) {
            var material = new THREE.SpriteMaterial( { map: texture } );
            secoundObject = new THREE.Sprite( material );
            scene.add( secoundObject );
            var thirdTexture = THREE.ImageUtils.loadTexture( "images/thirdTexture.png", undefined, thirdObject );
        };

        function thirdObject ( texture ) {
            var material = new THREE.SpriteMaterial( { map: texture } );
            thirdObject = new THREE.Sprite( material );
            scene.add( thirdObject );
            codeAfterloading();
        };

        function codeAfterloading () {

        };

This approach should make the process smoother for you.

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 significance of utilizing app.set() and app.get() in applications?

Is there a way to simplify this code: app.set('port', (process.env.PORT || 3000)); const server = app.listen(app.get('port'), () => { console.log('Server|Port: ', app.get('port')); }); Here is an alternative ...

Create a function that can dynamically filter an array of objects and extract specific properties into a new array

Here is the input that I have: [ { "metadata": { "id": 1071, "name": "First" }, "languages": [ { "name": "Alpha", "details": [ { "city" ...

CSS table property remains unchanged following an ajax request

At first, my table is set to display none, making it invisible in the application. I am using an ajax call so that when a user selects an option, a table is generated and the display property changes from none to block, making it visible. However, the tabl ...

Substitute a single occurrence of the dollar sign with an HTML tag

I have been attempting to insert an HTML tag into a price on my e-commerce website. Specifically, I am looking to add a tag between the "$" and the numerical value (e.g. $5.00), but I am unable to locate the core file where I can place the code between the ...

Tips for setting multiple states simultaneously using the useState hook

Exploring the use of multiple states handled simultaneously with the useState hook, let's consider an example where text updates based on user input: const {useState} = React; const Example = ({title}) => { const initialState = { name: &a ...

Issue with Angular2 Router not recognizing route for homepage

I recently incorporated the Angular2 Webpack Starter into my Angular2 app, which has been working great. However, after adding a fallback route to my app.routes.ts file and including its module (NotFoundModule) in app.module.ts, I encountered an issue wher ...

Utilizing v-model dynamically to showcase the outcomes of a specific property within a v-for iteration

As I iterate over an array using v-for, the number of items in this array varies each time. Currently, I am able to input values into the fields and have them correctly update the data property associated with them. However, there are two issues that need ...

An easy way to attach a Contextmenu to a specific element

I have implemented a scrolling feature for one of the div elements in my Application. Inside this div, there is a templated table with over 100 rows. Users are able to add or delete rows using a contextMenu. The contextMenu offers 4 options - AddTop, AddB ...

Can the tooltip placement be adjusted in ng-bootstrap when it reaches a specific y-axis point?

Currently, I am facing an issue with my tooltip appearing under the header nav-bar instead of flipping to another placement like 'left-bottom' when it reaches the header. Is there a way to manually set boundaries for tooltips in ng-bootstrap? Unl ...

Transfer information from an array to a Vue function

Having some difficulties passing data to the function myChart within the mounted section. As a beginner in vuejs, I'm struggling with identifying the issue. I am trying to pass data in labels and datasets, which are called from my function. Can anyone ...

Navigating through a text field using the arrow keys

The arrow keys (left and right) are unable to navigate within a text field. Additionally, placing the cursor within a text field for editing is not possible as it jumps to the end every time a character is added. This issue is present in Chrome and IE, but ...

React functional components can utilize switch cases for conditional logic

I am attempting to create a multi-step form using a switch case, but for some reason, changing the state with nextPrev does not update the case. export const FormSteps = ({items, pending}) => { const [step, setStep] = useState (2) const nextS ...

What is the process for establishing a connection between a websocket and an external API?

Currently, I have a route configured to fetch the weather data for a specific city using the openweathermap API Here is the code snippet from my index.js file: var express = require("express"), router = express.Router(); var weather = require("ope ...

What is the best way to include a disable option or default option in a select box?

I am incorporating react material in react using the select component. My goal is to include a first disabled option that says "please select item." This is how it's currently implemented in HTML: <select name="tagging"> <option sel ...

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

I've been trying to display the daily verse from ourmanna.com API using a combination of HTML and JS code, but I'm encountering an issue where the verse doesn't always show up. I'm not sure if this problem is on the side of their API or ...

Can a key event be activated on the DOM Window using Javascript or JQuery?

Can a key event be triggered on the DOMWindow or DOMDocument using JavaScript? I am developing a browser extension to interact with a website that has shortcut key events, similar to those in GMail. While I have come across other methods for triggering key ...

What is the process for triggering a PHP function when a form element is clicked in a webpage?

Currently, I am trying to implement a jQuery colorbox on my webpage which appears over a <select> drop-down list. My goal is to trigger an AJAX call every time a new option is selected from the drop-down. Even though I have written the following cod ...

Creating Helper Functions for Modifying Arrays in Javascript Without Creating a New Reference: How Can I Extend the Array Class?

This library is designed for managing user lists using socket.io. I've implemented custom methods in an Array extension class. However, I've encountered an issue with the removeUser method. While logging indicates that the user is successfully ...

JavaScript Slide Show using setInterval()

Need some help with JavaScript! I have a slide and I want to add a button to either make it autoplay or stop it. When I just use an Alert inside the function, it works, but when I add the interval code, it won't. Check out my codepen link Here is the ...

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...