I’m trying to build a scene, where a cartoon figure do work out on a beach. The environment is like the one in this picture. I understand there are threejs objects like Sky and Water. But they seems too real, I wonder if there are any examples or something similar so that I know how to start.
Cartoonish in terms of low-poly? Or in terms of color gradients?
If it is low-poly, here is something to give you an idea (click to view it online):
If it is color gradients, try MeshToonMaterial.
1 Like
In terms of low poly, thanks for your codepen. I guess it’s essentially BoxGeometry in your example. So I guess if I can generate the geo vertices from other sources, say Python, and serve the data to frontend, it should work too. I only need to change the Material.
I’m new to this, so I got another question. I wonder if the custom geometry can also work with Cannon.js. eg. if the model object step on it, let it leave a foot print.
Yes, it is BoxGeometry, but you can use other geometries too, including you can build your own geometry.
As for cannon.js, I have no in-depth knowledge. Most (if not all) recent/decent physics engines have some form of custom geometries, heightfields, terrains. Use one of them.
The idea of a footprint somewhat contradicts to the low-poly geometry. I.e., footsteps need some fine details, while low-poly inherently avoids fine details. My suggestion is to model the footsteps as textures (with or without bump map or normal map). Similarly, the terrain can be built with a displacement map, so you will have no need to modify vertices by yourself.
Finally, if you plan to use physics only for the footsteps, it might be easier to use some non-physics based approach.
Thanks a lot for the advice!