Hi, I’m (still) working on reproducing the instancing/scatter effect as per example https://github.com/mrdoob/three.js/blob/b993f5c99341b1b483c6bdf94fdc4fbac61aa0f1/examples/webgl_instancing_scatter.html
The problem I face is that the instanced mesh does not follow the surface mesh. The instanced objects seem to be “surrounding” it, but very distantly.
First, I thought the issue might be with the objects themselves as I import the FBX’s. I double-check the meshes and the normals and in 3D program(s) they seem fine.
Then I thought I might have to adjust the matrices a bit more since my objects are different than the example. I can’t figure out the solution however, I’ve never been too good with matrices.
The issue is - I probably could find a solution if I understood the problem. Please, advice what may cause such behaviour. The surface mesh is now surrounded by “cloud” of instances.
A fiddle: https://jsfiddle.net/magdazelena/fwxdqm93/1/
The JSFiddle is showing CORS errors because the FBX file cannot be loaded from your server, are you able to change that CORS setting or host them elsewhere? If you have a GitHub repository with the models in it, https://raw.githack.com/ might provide a way to host them with CORS.
Sorry about that. I used githack: https://jsfiddle.net/9yae0143/
I can’t make it thought the jsfiddle settings to compile ES6 arrow functions properly, but since you saw it’s CORS maybe you went through this?
The ES6 arrow functions are not a problem, the issue is that you are mixing them with ES6 Class notation. Class methods don’t need arrow functions — see https://eloquentjavascript.net/06_object.html#h_hPv1gHC33s for more information about ES6 Classes.
Unfortunately I’m not familiar enough with React to know how to get its JSX syntax working in JSFiddle… it seems to show errors now, and I have no idea how to fix that. Here’s a version without React, which doesn’t seem to be necessary to make this work: https://jsfiddle.net/donmccurdy/xb4f7nvu/
The MeshSurfaceSampler class is only available as an ES module, so you will need to import it rather than using global scripts. The example above shows that too.
Finally, the requests to your FBX files are failing. If you open the browser developers tools you’ll see CORS errors about that. I think the issue is that githack (or anything else, really) can’t access a private github repository.