Advice for first Three.js project

Questions
,
1

hi all,
I started using three.js and I’m really impressed on how easy it is to build things!
I do have a first version if my project running and it would be great to get some advice on specific topics but also general feedback.

I’m planning to publish a music video in the next few weeks and my idea is to embed a player for that video into a 3D house of cards, which the user can bring down while he’s watching the video.

Here is what I’ve built so far:
https://www.benzahler.ch/houseoft/index.html
User input so far is limited to zoom in/out using arrow keys.

Here are the things where I’m not sure if my current approach is good:

  1. What is the best image format to use for the card material? currently I use SVG, but I understand that the vector properties of the svg are not preserved and the cards sometimes look quite blurry. Is there a best practice for both image quality and performance as to what image format should be used?

  2. I notice that as I add more cards, CPU load is getting quite high. Apart from tweaking the cannon js parameters, is there anything that should be considered for a usecase as I have it?

  3. I embed the video as an iframe from youtube using the css3drenderer, reasons for my decision was to reduce load on my server and also, views on youtube are important these days. Anything that speaks against that approach from your side?

Would be great to get some advice on what I can improve!
thanks,
ben

1 Like
2

it is rasterized, but there is an issue separate from that:

see three.js webgl - materials - anisotropic texture filtering

3 Likes
3

It’s possible to run cannon.js in a worker, see cannon.js worker example

It might be worth to check out if this approach improves the performance of your app.

1 Like
4

nice! cards do look much better indeed with a high anisotrophy!

5

thanks, finally I found time to try the workers, but I’m really struggling to get this running in webpack.

One question: do you expect workers do improve the performance of my app or do you think this will reduce the load on the CPU on the device as well?

performance of my app currently is not really an issue, but I’m a bit worried about my users: when I’m running this on my (quite old) iphone, three minutes take about 4% of battery… seems quite a lot

6

workers do not really improve performance, they only improve responsiveness - your UI does not have to wait that much before responding to user actions. in other words, it feels faster, not is faster :slight_smile: and it is still going to drain your battery

1 Like