Threejs Cannon Virtual Experience Engine

can you share the source code so we can help you further develop your threejs project, especially on the level designs looks very dry and empty

1 Like

I will upload the updated source (with new city) source in Github soon

New virtual city is on development for integration with ThreeJs + CannonJs engine soon

Day time

Night time

Contact me if you are interested to take part on this project.


Other WebGL Islands - design for threejs cannon (low poly + high detailed texture) for open world gaming or exploring virtual properties.



1 Like

I just replace the three.module.js with the release r152 three.module.min.js and the pbr materials are accurately closed to how it is displayed in blender. the r152 file reduction made the THREEjs CANNON even liter and faster.

I really want to incorporate this in this threejs project, but when I saved the dds file it just turn black, is there any other format we can use to save it for threejs.

Keyboard controls are added to allow desktop users to control the avatar and vehicle when driving

DevLog: Updated Threejs r154, no noticeable difference. Updating all ThreeJs + Cannon versions.

You can edit 3d assets by clicking them,

1 Like

I updated threejs.min.js release r154 and noticed the graphics has become more solid, the colors are no longer washed out and more vibrant. Also the game play no longer freezing on loading assets, the rendering is fast.

If the webGPU libraries can be combined into one JS file say WebGPU.js would be great.

Waiting for WebGPU on one single JS file to be able to place buildings and more in this island.


I removed all the model and the i add my a new city and then i get this error?

wasm error_1

It runs for maybe 30 sec to a min but then ir freezed and the error occured, what did i do wrong?

You ran out of memory, and got an error… get more memory? :sweat_smile:
There’s too many possible reasons for having encountered this, texture sizes, texture count, draw call count, polygon count, bad coding practices the list can go on and on so without more detail or a live example of how you’ve set up your three environment it’s suggested that you do some reading on asset optimization and proper practices in three such as disposing unused resources… just to point to the tip of the possibly infinite iceberg…

1 Like

my laptop can not possibly run out of ram, it has 32 GB Ram and i checked the chrome is using only 23% is there a js code to allocate more ram for chrome to be able handle the out of memory,

also the cars turns over, is there a way to prevent that because no one likes their cars turning up side down often?

1 Like

That’s not how it works, VRAM and ram are not the same thing… Have a look at this page and tell us what’s reported as your device memory…

There is no magical javascript that can fix this for you, there is only your knowledge of whats happening in the code so far, if you can elaborate on how you’re setting up your environment, give some information on the details of your assets and possibly provide a live example, it’ll be more likely someone will be able to help and or debug your situation…


The out of memory bug has been fixed since, I also tested in different browsers and after all abuses the out of memory error is not occurring, either that version is a very old version before the bug was fixed or its caused by the device itself because it doesn’t occurred on my mobile device and desktops.

I also tested in Opera GX but its lagging, I don’t understand why, Opera GX is supposed to be a gaming browser but Chrome does better performance than Opera GX.

No killing of other players

Updated Theejs + Canno-es [Project Virtucities] with r155 to check if any conflicts or bugs may arise after tests and abuses al going well, Threejs + Cannon will be converted to the new version Threeverse project soon.

The Threeverse project utilizes virtual geometry and texture to handle large scale baked city.

Virtucities would like to extend it’s gratitude to the contributors and sponsors for allowing Threeverse project developments.

Added point and click navigation for easy movements

I did the interior cube map, the image must be square and 512

Oh I see, so did you manage to make it work? If that’s the case congrats, this single feature could open new possibilities for a myriad of things :muscle:t3:

1 Like

The threejs r156 is resilient, the rendering crash on thousands draw calls disappears, I can drive around on a low spec mobile.

Download Car from Sketchfab

Experimenting A.I. in this threejs project to develop A.I. fear by using pain parameters to prevent A.I. repeating crashes with vehicle or running recklessly and ending up dead or hurt.

Download Source

I have this CSM error, and I can not find the cause.

HREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.

I updated threejs + cannon sandbox and there is not much difference, no noticeable improvements, same quality and speed.

This threejs project sandbox for open world virtual experience is declared complete at its optimum version.

Should anyone wish to download or modify, it’s open for anyone to improve and redevelop this version for non military purpose.

I have update this threejs project to r158, and the noticeable improvements is the csm errors has disappeared and the cascade shadows is more pronounced close to realistic. Also the gltf loaders feels faster, loads gltf in less time even with too many assets. I am looking forward to build a new cities that is much bigger and for real virtual life.

This sand box island city has done its purpose for the development of this virtual world by threejs + cannon.

What a good time to be part of the threejs, it’s the best projects I have ever done in my life that is meaningful and will be a good use for humanity in the future.

And all these are made possible by the threejs libraries

1 Like