How to load Three.js JSON model using webworkers? Main problem I an trying to solve is to make the browser UI responsive by offloading the computations to the webworker.
Related
I have successfully rendered 3D Model with react-three-fiber, which is react wrapper for three.js, The .glb, .gltf files examples are in docs so this was ok. I want to do similarly render point cloud in .laz format
I tried LASLoader which definitely parse this file, but it's result is not equivalent to scene which is just passed in <primitive object={scene} /> tag
I am also open to know best ways possible to host point cloud in web with events (like onClick etc), capabilities.
PIXI.js has Container#cacheAsBitmap which causes the container to "render" itself to an image, save that, render the image instead of its children and when a child is added or removed or updated, the cache is updated.
What's the alternative for Three.js (but instead of an image it would be a mesh)?
I may not be understanding your question properly, but your reply to Sabee's answer was helpful. It sounds like you're looking to either merge multiple geometries into a single mesh or implement a form of model instancing, with the goal of reducing draw calls.
There is more than one way to accomplish this, depending on your requirements. You can merge multiple geometries into a single geometry object, and provide either one material or an array of materials (where each index corresponds to one of the merged geometries). You can also use GPU-accelerated instancing to achieve a similar effect with only a single copy of the geometry.
I'll refer to Dusan Bosnjak's excellent Medium series on instancing, which starts here: https://medium.com/#pailhead011/instancing-with-three-js-36b4b62bc127
As well, here are the three.js examples regarding instancing: https://threejs.org/examples/?q=instanc#webgl_buffergeometry_instancing_dynamic
Pixi.js is a 2D javascript library, using WebGL to render the images(frames) into html5 canvas. Three.js allows the creation of Graphical Processing Unit (GPU)-accelerated 3D animations using WebGL.
The browser cannot store rendered 3D frames, this work allows the GPU Accelerated Render Cache, which depends on what hardware's they run. Helpful post understanding what's going on behind the scenes.
But you can cahce your assets in browser like images, json objects of 3D models and etc.
In Three.js Cache class is a global object, used by assets loaders (TextureLoader, ImageLoader, AudioLoader ...), by default is disabled (false). To enable it you can set THREE.Cache.enabled = true ;
I think by default the browser should cache the textures for performance reasons, but if you want to be sure simply enable the cache by force code it in Three.js. Also the creator of Three.js answered this question.
When I use three.js to load my Collada file, FPS is only 5-7.
I try to optimize it with Blender and Meshlab, I can load it smooth but model becomes worse.
Can anyone explain to me why my model is rendered with a low frame rate?
You can download my model right here.
Can anyone explain to me why my model is lag when load.
Your model is rendered with 66011 draw calls. You can see this information by inspecting the WebGLRenderer.info object in your debugger. Such a high amount of draw calls is unfavorable and most likely the main reason for your bad performance.
So the first thing you should try is to merge geometries in your content creation tool (e.g. Blender). Also avoid the usage of multiple materials per 3D object.
BTW: Instead of using Collada, export your model as glTF and then load it via GLTFLoader. It's the recommended 3D format of three.js. More information right here:
https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models
Based on webgl_loader_collada and webgl_loader_collada_skinning,
I tried to load my own basic collada simple model.
But the result is : the animation is too fast.
When I load the example collada models (avatar and monster), the speed is normal and their animation is also on 250 frames or less.
So i don't know what is wrong with my own model.
Here is my project
On page.html you can see the result and if you want all the files, you can download pack.7z.
Thank you for your attention.
Example this model is a dynamic component:
http://sketchup.google.com/3dwarehouse/details?mid=c1e4befdfbfd283135b07d6213c348&prevstart=0
How do I import this to Three.js? I was thinking if it was possible to import the model and create the dynamic component dialog with input fields and some javascript? So it would be interactive like it is in google sketchup. I know to import OBJ files to JSON and then load them with three.js, but what happens to the dynamic components?
Dynamic components are in Sketchup-specific format, and there is no way to import them to Three.js as is, while maintaining the dynamic options. When exporting from SketchUp, dynamic components should be exported as they can be seen in SketchUp, but as dumb geometry, the dynamic nature is lost.
You'll have to roll your own dynamic components in Three.js if interactive models are needed, maybe by using skeletal animation, morph targets or just moving geometries/Object3D groups around. Or you could see how the various classes in three.js/src/extras/geometries are implemented. No easy way around as far as I know.