I want to know when is the first time all the object are rendered? Is there any callback function option?
It seems that there is only a callback function available for image loading.
I want to hide something after all the objects are rendered. Could anyone tell me when my function to do this hiding should be called?
The render works all the time, but I don't know when is the first time all the objects in my scene are rendered.
As the image is ajax loaded,i should have a flag on the loadTexture callback funtion.That may be the key.
THREE.ImageUtils.loadTexture(this.scenedata.urls[i],THREE.UVMapping,function(){
self.isLoaded=true;
})
in the update()
if(this.isLoaded) this.hideLoadingbar()
It works better,just after image loaded and before everything is rendered.
Images sometimes take some time to load, but everything else will be in place when the first animation frame is executed. So in your animation code, just check if this is the first time it is called, and hide your object at that point.
Related
I am creating an AJAX transition between to pages where I have a hero image which stays the same on both pages.
After clicking on a link, I center the image, add the new HTML behind and fadeOut the center Image.
The problem is, even with a cached image (it is the same file) I see the image appearing suddenly in the behind (from AJAX response, rendering after appending to DOM) when fading out the image in the front.
Even by adding a little delay to the fadeout of the image in front, the image in the back is still no ready. (Probably the rendering just takes more time).
My options would be to wait for the Ajax image div to have rendered completely (which I don't know how to do), or – and that is what I'd like to try:
Replace (copy) the image within the AJAX response before adding it to the DOM.
Is this even possible, and will it help improving the performance?
I will also try to replace the div immediately after replacing the content with the AJAX response.
Any hints are still very welcome.
cheers
You could set the css z-index property so that the top image stays on the top. And set an event listener so when the image underneath is finished loading you can fade out the top image.
$('#bottom-img').on('load', function() {
$('#top-img').fadeOut();
});
Well thanks for the answer. This is what I meant. This would require some waiting for the image to finish loading and then fadeOut the top image. But I got a nicer solution:
Because the two images are exactly the same, I replace the content in the back (ajax response), and immediately after I copy the image on top into the ajax response (so I replace the image with an already loaded one).
Then I fade Out immediately.
This gives me a very smooth looking transition and the downside of the «waiting until loaded» is gone.
(In comparison to my initial question, where I wanted to replace the image within the ajax response before adding it to the DOM, I now add it to the DOM and manipulate it immediately.)
Thanks anyway.
Cheers
I am trying to take a 'snapshot' of a babylon3d scene ... in other words: I am trying to clone a babylon3d canvas when a user presses a button, and then append the new <canvas> to the <body> .. Sometimes it works, but other times it does not.
However, if I use a simple canvas (ie. by using fillRect), the cloning/appending always works as expected.
I have set up a test on plunker to demonstrate my problem: plunker: press the button over and over again to see how sporadic it behaves when there is a babylon scene. AND NOTE: You can toggle between the simple canvas and the babylon canvas from within the _jquery(document).ready(...) handler.
thanks, Shannon
This is because from version 2.3.0 of Babylonjs :
Engine now initialize WebGL with preserveDrawingBuffer = false by default.
You need to initialize the Engine by passing a {preserveDrawingBuffer: true} object as third parameter.
Forked plnkr
But this will unfortunately kill your canvas' performances.
See more about it here.
I'm not really a specialist of Babylonjs, and I didn't find a way to make a call from scene.render method where we could use the flag method proposed by
#CapsE. But there is a BABYLON.Tools.CreateScreenshot(engine, camera, size) method, which will make a downloadable png from your scene ; maybe this could help you.
I'm new to ThreeJS and I made this example which shows one of our model.
http://petrie3dtesting.museums.ucl.ac.uk/3DFootCover/index.html
I created a Petrie3Dviewer and in the HTML page created a viewer object which takes as input an .obj and .mtl file. Strangely tho, the objects shows up BLACK and then when I start interacting the texture comes up. I tried everything I think: different browsers, making the texture smaller, different computers, nothing I get a random behaviour all the time.
I tried on FIrefox, Chrome mainly.
It seems that I need to force the rendering once the obj file is loaded but the OBJMTLLoader.js does not provide any event for it.
Really many thanks for the help.
Best,
GC
You should call this.DoRender in your Animate function to render the frame.
this.Animate = function() {
this.orbitControls.update();
this.Animate();
requestAnimationFrame(this.Animate.bind(this));
}
At the moment you call your render function only when the user changes the perspective with the OrbitControls. And because your texture is loaded asynchronously it is not ready the first time when you render the frame.
I'm using THREE.CSS3DRenderer and THREE.TrackballControls which calls render on change. I'd like to change the HTML elements (approximately 200) when the camera moves but if I do it on each render call, the number of calculations would be really high.
Ideally I'd like to discard small movements (not visible to the human eye) and only apply my calculations when needed.
E.g if camera.x = 0.015529912611241384 and then its moved, I only run my function if the difference between the old and new position is 0.0001
Any ideas on how to accomplish that?
Thanks
Instead of calling the function that changes the html function directly, raise a flag called change_html_elements.
Have another function that is running every x milliseconds, call the function that updates the html elements and resets the flag to false.
I am trying to create a flipview based windowsRT application where each item of the flipview(a page in my app's terminology) is a VSIS backed image. As per the design of VSIS, whenever any image comes into the visible area, the updatesneeded function of VSIS gets called and draws the bitmap for me.
As an enhancement, I want to cache the image/bitmap of the next page which will be displayed if the user clicks on the next button. To achieve that, I call the invalidate function of the corresponding VSIS in a different thread hoping that this would render the bitmap in background(by a call to UpdatesNeeded) and by the time user clicks the next button, the image would already be ready to be displayed.
But it seems that the invalidate function does not call the updatesneeded callback when the VSIS is not in the visible area and hence my caching design is failing. Is there a way/workaround for the same? I know the dimensions of the page/image beforehand so getting the update rects for vsis is not a problem. Moreover, my updatesneeded function will just return if the bitmap is already rendered taking care that when the image comes in the visible area and updatesneeded is called, VSIS would not need to redraw the whole image again.
I have found the solution. Actually it was wrong on my side to assume that the UpdatesNeeded function would get called even when my image is not in the visible region. So instead, I have implemented my own function PreCacheImage. When called, this function creates an ID2D1Bitmap of the image and stores it. And when the UpdatesNeeded function gets called(when image becomes visible), I check whether my Bitmap is valid, and if it is, I just blit it onto the screen.