Is it possible to create a game-like website with real-time computing natural scene?

Hi everyone, it’s my first time to post a question here.

I aim to make a 3D island on website which user can explore. So basically, the user controls a character, it can walk, run, stop by trees and rocks. Now I am using cannon.js and sketchbook to implement physics and get control of the character.

I think that characters could interact with each other on this island like MMORPG (which needs socket.io), and I found a good tutorial to handle this issue.

My question is about artistic style. For example, I want the island is surrounded by beach and the real sea, also I want characters wear cloak which could be blown by wind while walking or running. There are a lot of artistic style settings I want to implement, and below is reference, it’s a game app on mobile:

https://www.youtube.com/watch?v=LpqhnbGRbig&list=PLLdbvJxMNMJv-Qz8fYYAgN278x2bRDu0p

Is it possible to do all these things with three.js in website on the desktop and mobile, and they all work well? I am afraid of that the performance of this game-like website would be bad because of so many real-time computing things (sea, light, wind, sand, cloth, physics…etc).

Please let me know if my question is not clear. Thanks for replying.

You definitely can, at least for PC. The key here is optimization. All successful games you see are based on highly optimized engines. You need to choose the optimum path to every feature you add, and make custom optimizations in your code where needed. The same feature can be made in many different ways, but only a few are efficient. You need to find the most efficient ones, which requires a lot of work, but the result is rewarding.

@dllb much thanks.

I’ve got some direction from your reply, and will try my best to make my code more efficient!