If I load a small PLY file (4-10 MB) using the following code:
this.loader.load('assets/data/GuyFawkesMask.ply', function (geometry) {
var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );
console.log(bufferGeometry);
// Create object
let object =
new THREE.Mesh(bufferGeometry,
new THREE.MeshPhongMaterial(
{
color: 0xFFFFFF,
//vertexColors: THREE.VertexColors,
shading: THREE.FlatShading,
shininess: 0
})
);
_this.add(object);
});
Everything works fine.
If I load large files 50MB+ the Browser sometime crashes or if the model is loaded successfully the interaction with the object using the orbit-control is painfully slow in some computer.
I appreciate that 3D models are complex beasts but do you know if there are ways to optimize memory usage, model loading in THREE js without decimate the file, operation that I cannot do without losing vital information?
I've had a similar issue with larger models. What I suggest is that you stream and load the model in small chunks (for example 1mb at a time).
The problem is, Three.js does not support loading chunked models.
What I did for myself was to rewrite a loader to work on chunks of data and build the internal representation from chunks.
Another way would be to export the scene in smaller pieces and then recombine them after loading.
There is also the third possibility, that the model is simply very complex.
Edit: Okay, I played around a bit and if you convert the file into a binary STL, then it works a bit better and does not crash chrome, while maintaining the same vertex count.
I'll include a link here to 2 converted files, where one is a decimated version (70% reduction in vertex count) and the other is a conversion of the original, both of them worked for me.
Related
I'm currently working on a little game written in JS using Pixi.js(https://github.com/pixijs). One Problem has occured currently, I'm trying to implement pixel exact collision between shapes, while I was programing a little I noticed that all the pixel RBGA values of my images are just 0.
I searched on the web but for a while but the only reason for those Problems I could find was that the canvas was tainted because of CORS(Pixel RGB values are all zero).
But this can't be the reason in my case because I created the sprites myself, I'm not loading them from other (any) domains or something like that.
Could this be a problem with the images? How do I avoid that? I will append some code that works if I use other images (some images I downloaded for tests).
const app = new PIXI.Application({width: 500, height: 500});
document.body.appendChild(app.view);
PIXI.loader.add("sprites/test.png")
.load(() => {
let img = new PIXI.Sprite(PIXI.loader.resources["sprites/test.png"].texture);
app.stage.addChild(img);
console.log(app.renderer.extract.pixels(img));
});
Edit: I tried getting the RGBA values using a short Java Program btw, same problem. Every single value is zero.
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
So I have two issues right now.
it seems objectloader never load the texture of 3d model from json files.
I don't know somehow, the positions of 3d models change a little bit after THREE.js loader load them.
Here is what it should look like
Here is what it looks like on my browser
Here is THREE.JS code:
var loader = new THREE.JSONLoader();
loader.load("./script/treehouse.json",function ( geometry) {
var mesh = new THREE.Mesh( geometry);
$scene.add( mesh );
});
Export setting:
And here is how the json file looks like:
Update: Now since I chose dae format, it looks exactly the same from blender, however, textures are still not there, and the color of models change every time i open the dae files or refresh the page.
I suggest using a different format than THREE.js internal format.
It's been known to change a bit between revisions and will end up requiring you to re-export assets later on. You're better off using a format that is standard, like GLTF, Collada, OBJ, or FBX. Additionally, the THREE json format is pretty bloated and results in files that are pretty easy to read, but can be quite large.
I recommend GLTF 2.0 (gltf) or Collada (.dae) format. You will get smaller files and the format should remain more stable. If you use Gltf, you can also use Don McCurdys nice GLTF previewing tool to sanity check your files if you are having problems.
https://gltf-viewer.donmccurdy.com/
There is also the three.js editor that can be helpful for sanity checking files.. try dragging your json on here:
https://threejs.org/editor/
I'm attempting to migrate my Coin3d geology visualization projects over to Three.js. I've experimented with the various loaders and have decided to use the JSON format & loader to load mesh data, but I cannot find a method for storing and loading lines, points, and text. I tried the VRMLLoader, but the following code:
var vloader = new THREE.VRMLLoader();
vloader.load('line.wrl', function (geometry) {
var line = new THREE.Line(geometry);
scene.add( line );
});
returns nothing, which isn't surprising, given that IndexedLineSet is not referenced in VRMLLoader.js (IndexedFaceSet, Cylinder, Cone, etc are there). The JSON Geometry format 4 and Model Format 3 are mesh-centric if not mesh-exclusive, and I wonder if there are plans to add something like
"data":{
"lines":[3,0,1,2,3...],
"points":[0,2,4,1,3...]
}
to the spec? In the meantime, does one of the other loaders support loading Lines, Points, and Text? If not--and I assume the answer is no--is the best way to go about this to hack the JSONLoader to read
"lines":[3,0,1,2,3...] # or whatever I want to call it
and if so, how would one go about doing so? In the loader callback, or would I have to make a custom my_JSONLoader.js?
I am currently working on support for IndexedLineSet in the VrmlParser project. VrmlParser uses a ThreeJs renderer for display: http://github.com/bartmcleod/VrmlParser
I have a basic scene into wich I am loading objects using the JSONLoader. The objects themselves have very small footprint, for example: milk carton: 560kb with textures, 34 kb json file.
When rendering, let's say 10 new objects, if I orbit the camera to bring them into view, the animation loop freezes for a second or so. After this first freeze, the camera orbits smoothly no matter how many objects. Loading dynamically the objects would be a solution, but for my specific use case, I still need to load at least 50 objects at first load.
Update - I have added the preload functions I use in my production project, and I also added 21 different models just to illustrate my specific scenario. I have tried the following solution:
preloading the json files,
reading the source path to the textures,
loading them with texture loader,
overwritting the maps of the json material objects with the preloaded textures,
finally releasing the objects into scene. The same behavior occurs again.
Try to click the setCamera link to se how laggy it is. I need to cut this lag to 0ms. Thanks for support!
Working demo: http://demo.adrianmoisa.ro/flexikom-loader/ First try to orbit the camera up and down to check it's working ok, then left and right. Any advice is much appreciated!
Looking at your code I see you are loading the same object 10 times, creating 10 meshes that are all the same. All use the same geometry and the same material. This is where your lag comes from. Both from the loading (asynchronous request to the server) and the object creation.
What you need to do is to load one object and create one material that you will assign to the object. Then you clone() the object 10 times assigning the different position that you want to each cloned object.
Gaitat is correct that you should not be loading the same object 10 times. But I think the lag is directly related to the textures.
You should load the textures outside of the loop.
How it is now, you are loading 30 textures onto the gpu when you could be just loading 2 (at least I think this is how it is working).
Profiling the page shows that texture2D is taking a lot of time.
I am almost certain that this will stop the lag.