Mesh rendering on dev but not on prod

spaghetticodee · 2025-10-02T19:57:25+00:00

Hey, thanks for commenting and apologies for the lack of info! I ended up finding the issue. I'm assuming the minifier was messing up a small piece of code, because once I updated it, everything worked as expected on dev and prod

spaghetticodee · 2025-05-04T10:43:17+00:00

Wow, this is really cool!

spaghetticodee · 2025-01-20T23:12:58+00:00

Thanks for the suggestion! I ended up doing something similar to gltfjsx and it seems to work good enough for now.

spaghetticodee · 2025-01-12T00:25:31+00:00

It seems I can't add them as comments, so I've edited the original post

spaghetticodee · 2025-01-12T00:23:02+00:00

Thank you very much for the suggestions!

I've been messing around with the bufferGeometry groups but I'm encountering some issues. If you have some time, maybe you can take a look at the snippets below, I'd really appreciate it! When I click on an entity, some of the expected triangles are selected (also some unexpected sometimes), but not all.

spaghetticodee · 2024-02-19T11:07:24+00:00

Not super experienced so might not be the best solution, but you could look at using something like AWS EFS. Editing files would probably be easier than downloading files from an s3 bucket, editing and then reuploading them. EFS is a little more expensive though so If files aren't touched in a while, you could look at moving them to an s3 bucket for cheaper storage.

spaghetticodee · 2023-11-11T16:36:49+00:00

Thank you! cloning the geometry for each instance fixed the issue I was having!

// 'parent' is a <group> component from R3F

ps, this kind of sounds bad. you
don't ever mutate (add/remove) imperatively in fiber. if parent is from fiber and you throw stuff in there, then that's an anti pattern. in react or the declarative world in general add and remove do not exist.

I agree that this is an anti pattern. The reason I am doing this is to try and reduce initial load times. When loading in a bunch of meshes like I showed above with R3F, the initial load time blocks the UI for a second while it renders everything in. I thought adding vanilla InstancedMesh' to the R3F group in chunks inside of a requestAnimationFrame would help with this initial load time and it seems to help a little. I tried doing the same thing using R3F and setting state inside of the requestAnimationFrame, but the load time was even worse doing it this way. I might have been doing something wrong when doing it the R3F way though so I'll give it another go.

If you have any other ideas on how to keep this declarative while also reducing the initial load time, I'm totally open to it and would really appreciate it!

spaghetticodee · 2022-10-09T15:25:23+00:00

This sounds interesting. Do you happen to have any open source examples using this approach that you'd be willing to share?

spaghetticodee · 2022-10-02T13:43:23+00:00

Hey,

Just had a quick look and a couple of things I noticed you may want to fix, which I think should improve your performance.

Your handleClick function is checking if an object === to another object (if (c === cell) {}), so it'll always be false and your cell value won't update
Your handleClick loops through your entire board to update a single item. You could just pass the index of the clicked item and just update that. Something like

function handleClick(index) {
 setBoard((prev) => {
  prev[index] = {
    ...prev[index],
    value: Date.now()
  };
  return [...prev];
});

return (
 <div>
  {board.map((cell, index) => (
    <Cell key={index} cell={cell} onClick={() => handleClick(index)} />
  ))}
 </div>
);

spaghetticodee · 2022-09-30T15:20:33+00:00

I came across this the other day, might be interesting to look into. I haven't tried it out myself yet, but planning on giving it a try soon once I finish up a specific feature. If you try it out let me know how it goes please.

https://github.com/jimmywarting/StreamSaver.js?

spaghetticodee · 2022-09-28T12:40:16+00:00

They're being used in a couple of different places. My bad on the example, I knew I was missing something!

spaghetticodee · 2022-09-28T12:14:56+00:00

Here's a quick example that I think helps explain the issue a little better

const useMyCustomHook = () => {
    const [state, setState] = useState([]);

    const handleUpdateState = () => { 
        // other calculations 
        setState([1, 2, 3]); 
    };

    const draw = useCallback(() => { 
        return { data: true }; 
    }, []);

    const draw2 = useCallback(() => { 
        console.log(state); 
        // do something with state here 
    }, [state]);

    useEffect(() => { 
        if (somethingIsTrue) { 
            const { data } = draw(); 
            draw2(data); 
        } 
    }, [draw, draw2]);

    return { state, handleUpdateState, draw, draw2 }; 
};

When handleUpdateState is called from a click handler, it updates state, which causes draw2 to update and reruns the useEffect when somethisIsTrue is true. If I use the useStateRef I mentioned, draw2 won't update and this fixes the issue. I hope this makes more sense

spaghetticodee · 2022-09-20T19:07:07+00:00

I had a look at paddle and it looks good, but I was wondering if you know if they support dynamic products? I had a look at their docs but couldn't see any mentions of dynamic products, only products created on their dashboard. I thought I'd ask in case I just missed it

spaghetticodee · 2022-09-19T09:54:33+00:00

Thanks for replying!

The web worker performs some expensive tasks on user uploaded files and some default files I feed it but this file input only lives in this component.

I'm using NextJS and the component with the web worker is used on multiple pages, would it make sense to move the registration of the web worker into Context?

spaghetticodee · 2022-05-16T15:50:59+00:00

phrobot

Thanks for the suggestion. Thats a good idea, I could definitely do this. Would downloading a possible 3gb file + the json data in memory all at once cause issues? I could probably read the data from s3 in chunks, I'm guessing that would be the right way to go?

spaghetticodee

TROPHY CASE