Tips for verifying an item's presence in a three.js scene

Utilizing THREE.js Loading Manager allows me to verify if the object or texture has been loaded successfully.

var Mesh;
var TLoader = new THREE.TextureLoader(manager);

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );

};

manager.onLoad = function()
{

    console.log(Renderer.domElement.toDataURL());
}


 function renderModel(path,texture) {

            var Material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading});
            Material.side = THREE.DoubleSide;

            var Loader = new THREE.JSONLoader(manager);
            Loader.load(path,function(geometry){

                geometry.mergeVertices();
                geometry.computeFaceNormals();
                geometry.computeVertexNormals();

                TLoader.load(texture,function(texture){


                Mesh = new THREE.Mesh(geometry, Material);
                Mesh.material.map =texture;
                Scene.add(Mesh);


                });
            });
        }

I execute the renderModel function in a loop. However, the output of 'console.log(Renderer.domElement.toDataURL())' within the manager.onload function only captures images of certain 3D models and not all present in the scene.

My goal is to obtain 'Renderer.domElement.toDataURL()' once all the 3D models have been rendered in the scene.

Currently, only a few models are captured in the image output, even though all items are loaded in the scene.

Answer №1

Every time the renderer renders an image, it does so frame by frame. Once all objects have finished loading, the onLoad method in the manager is immediately triggered. This means that the last objects are added to the scene and you retrieve the image data without giving the renderer a chance to draw a new image. To address this, consider introducing a delay such as a 200-millisecond timeout.

UPDATE:

An alternative approach would be to invoke the render method within your onLoad function. By doing so, the renderer will produce a new image before you execute the console.log.


manager.onLoad = function()
{
    Renderer.render( Scene, camera );
    console.log(Renderer.domElement.toDataURL());
}

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

unselect the button using jQuery

I want to trigger a popover when a variable exceeds a certain value, triggered by clicking a button: $(function () { $('[data-toggle="tooltip"]').tooltip({ trigger: 'manual', placement: 'top', titl ...

Failed attempt in sending JSON array through AJAX to PHP process

My goal is to use an ajax call to send a JSON array to a PHP web service. Despite trying several solutions recommended for similar questions, I have not been successful. Here is the structure of my JSON array: var res= [{"id":-9007199254740990, "NW":{"x" ...

I am trying to set a background image specifically for one page in my application, but I am struggling to make it work. As a newcomer, I am still learning how to

I've been working on the code for a login page, but I'm having trouble setting a background image for the page. I know how to set it for the whole application by modifying the app component, but when I try to do the same for this specific compone ...

Dynamic change in the mutation observer is not causing the callback to trigger

I have created a nested structure with two <div> elements. I am monitoring changes in the width of the inner <div>, which is set to width:auto;. Despite adjusting the width of the parent <div>, the mutation observer callback doesn't ...

Consolidate common values within a JSON object into a single grouping

Hello there, I need some help with grouping two JSON objects into a single array by common values. Here is the initial input: const json = { "2280492":[ { "ID":"2280492", "Name":"Paul ...

Preserve information on page reload in AngularJS

I am currently working on an AngularJS application with Spring REST as the backend. My experience with AngularJS is quite new. Within my UI page, I have a table displaying a list of objects with an edit button for each record. Clicking the edit button ope ...

The final condition of the ternary operator fails to render if the specified condition is satisfied

Having trouble identifying the issue with this ternary statement. The last element (blurredscreen) is not appearing when authStatus !== "authenticated". return ( <> <div key={"key-" + id}> {isO ...

Angular directive button failing to trigger ng-click event

Recently, I started working with Angular and ran into an issue while trying to set up a custom directive. The purpose of this directive is to display a button upon hovering over it, which, when clicked, should trigger a function within the directive. The b ...

Error: Unable to access the toISOString property of an undefined object

https://i.sstatic.net/jtZnQ.png import './ExpenseItem.css'; function ExpenseItem(props){ return ( <div className="expense-item"> <div>{props.date.toISOString()}</div> <div className="expen ...

"Can you send multiple variables using an Ajax post by using a loop

I'm trying to figure out how to post multiple variables from dynamically generated "username" ids like "username1", "username2", and so on, all in one ajax post request. The issue I'm facing is mainly with the data parameter. var numOfInputs = $ ...

iScroll not working in conjunction with jQuery Mobile

I am looking to integrate iScroll into my jQuery Mobile pages in order to enable horizontal scrolling of a large table. With the recent release of the first beta of iScroll 5, I am eager to utilize this version which includes a dedicated horizontal scrolli ...

AngularJS Implementation for a Dynamic User Interface

After working with MS MVC and KendoUI controls for my web apps, I am now transitioning to a project that will utilize MS WebApi 2.0 for a restful pattern and a Responsive UI consisting of HTML5, Bootstrap, and AngularJS. While I have experience in writing ...

"Unsuccessful Grails GSP Ajax Call: OnSuccess Function Fails to Trigger

Within my Grails .gsp file, I am executing an ajax call: $.ajax({ async: false, url: '<g:createLink controller="mycontroller" action="myaction"/>', data: params, dataType: 'json', contentType: 'application/json; ch ...

Ensure the website is able to adjust its size when the top banner increases in size

On my website, there is a top banner containing contact information that expands when clicked. However, the expanded div overlaps the site content. Is there a way to make the site scale with the expanded div so that the top of the site starts below it? I ...

Error encountered while compiling ./node_modules/@material-ui/core/ButtonBase/ButtonBase.js

I've encountered a frustrating error message: Failed to compile ./node_modules/@material-ui/core/ButtonBase/ButtonBase.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in 'E:\IT&bsol ...

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div. I want to display an image control button next to each image. This button should on ...

Having trouble retrieving a specific key from the state object in Redux using TypeScript

I have incorporated TypeScript into my Ionic project, using React hooks. I recently added an errorReducer to handle any errors that may arise from the server. Below is a snippet of my code: Action import { ERROR_OCCURRED } from "./types"; ...

javascript - Include new parameter in object literal and retrieve

I have a base object that I define using an object literal: var obj = { key1 : 'value1', key2 : 'value2' } Now, I want to pass this object to a function and extend it like this: myFunction( obj + { key3 : 'value3' ...

Utilize PHP within an HTML form for action without causing a redirection

I am working on an HTML form that looks like this: <form id="ContactForm" name="ContactForm" method="post" action="emailinfo.php"> On the form, there is a submit button that triggers the verify() function: <a href="#" class="button1" onClick="v ...

Retrieve the matrix3d values from the -webkit-transform property

My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations. I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process. Is it poss ...