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.
Related
I have a scene that is mostly static, i.e. without user interaction it doesn't change (animations).
The user interacts with the scene. For example:
when the user clicks on certain location in a map, another image opens in another pane
the user may move the camera by moving the mouse
etc...
Originally I implemented the rendering via animate(), which calls:
function animate() {
requestAnimationFrame( animate );
render();
controls.update();
}
This works fine (in terms of response) except that
the rendering happens constantly, which is not necessary.
for one of the admin pages, which does not show the scene, I'm getting runtime errors when the scene does not exist, but the rendering still goes on...
So I re-implemented the rendering by calling, explicitly, after user action which change the scene
render();
controls.update();
This requires more work, because I have to cover all the cases where the scene changes.
In one of the cases, the behaviour is not as expected (the rendered scene is black and explicit call to render does not fix the problem).
The link here says that if your scene is static, there is no reason for an animation loop.
The link here suggests to use animate().
My questions:
Is explicit render, a good pattern to use in three js for static scenes?
Are there pros to render only when needed, instead of calling animate which renders constantly, when this is not needed?
In terms of resource load in general
The link here says that if your scene is static, there is no reason for an animation loop.
The answer of the respective stackoverflow question is also the correct one. The second link is unrelated to question whether to use on-demand rendering or not.
In general, having an animation loop requires more resources since you constantly render no matter if the scene changes or not. However, certain application like 3D viewers (without animation playback) do not need to do this. It's sufficient to render only when certain events happen (e.g. user interaction).
Is explicit render, a good pattern to use in three js for static scenes?
Yes, it is. It is a good pattern for 3D applications in general.
Are there pros to render only when needed, instead of calling animate which renders constantly, when this is not needed? In terms of resource load in general
The app requires less resources which is always a good thing. E.g. mobile device will save a lot of battery and laptops or desktops will be more quiet.
I have been using the single mesh export method on animated models, loading it with the JSONLoader (using this tutorial http://unboring.net/workflows/animation.html ) and it works fine.
For scenes with more than just 1 mesh I export the full scene (Scene and Hierarchy selected) and use the ObjectLoader. So far it works fine, i can add them to the threeScene and render everything fine, no problem.
However when i want to do the same with the model from the tutorial above (export as full scene) i cant animate the character. I can do the whole same procedure i do with the asset loaded with the JsonLoader, i can even get the mixer's 'loop' and 'finished' dispatched events from an animation being played but the model never moves, it stays on the T-pose. Internally it seems its working fine, but the character doesnt do anything. Im basically running the same code for both types of character loading, except no animation is shown.
Should i be doing an extra check somewhere? i also tried cloning the geometry from the ObjectLoader result but it didnt clone the animations so i guess that doesnt works either.
Seems like even as skinning is checked true on the blender export, i still had to set to true on skinning on the code.
clonedObject3d.material.skinning = true;
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.
It appears that THREE.js sends mesh (geometry and material) information to the card only when an object is first rendered. Unfortunately this can cause noticeable hiccups in frame rate when a new object comes on the scene.
Is there a way to utilize the three.js framework (or is there a parameter I'm missing) to send the mesh data down to the card immediately after the associated resources are loaded, rather than on first render? I've considered creating a temporary / off-screen scene that I could put each object into on load, render once, and the discard. I've also tried calling the low-level renderer functions directly with mock data to force the write. It works, but both are hacks.
Any suggestions?
Three.js r67.
I want to generate the top and perspective view of an object.
Input: A 3d object, maybe .obj or .dae file.
Output: the image files presenting the top and front view of the loaded object.
Here is some expected output:
The perspective view of a chair
The top view of a chair:
Can anyone give me some suggestions to solve this problem? Demo may be preferred
You could create a small three.js scene with your obj or collada-file loaded using the appropriate loaders. (see examples of the specific loaders). Then create the necessary cameras you want to have in the scene. See examples for orthographic and perspective cameras that come with three.js, too.
To produce the images you want, you could use the toDataURL function, see this thread here and use google
Three.js and HTML5 Canvas toDataURL
in essence, after the objects are loaded, you could do something like:
renderer.render(scene, topViewCamera);
dataurl = canvas.toDataURL();
renderer.render(scene, perspectiveCamera);
dataurl2 = canvas.toDataURL();
I think you could also use 2 renderTargets and then use those for output, too, but maybe if you are new to three.js, start with the toDataURL() method from HTML5.