earth natural disaster (beta)

Showcase
, ,
1

This is my first Three JS project. If you have any ideas to make it better feel free to comment!

click here for repo

3

Thank you so much!! I am trying to update it right now and i am adding animations and better styles so stay tuned!!

4

It is neat and I am not really looking to spoil any of it but for those who might be interested in looking at your page without installing it via npm, here is a standalone HTML version of it using slightly different maps from my three.js repository.

Not really sure if it might be missing any of the original features.

EDIT: I did additionally slow down both the Earth’s and the Moon’s rotation since orbit controls allow for manual rotation.

Natural Disasters 3D.zip (4.9 KB)

1 Like
5

You should host a prebuilt version of your site directly in the repo w github pages:

Here’s an example from one of my repos: GitHub - manthrax/monkeypaint: An app for painting on meshes in THREEJS, with glb export.

See how you can view it directly from the repo via its github pages link (also linked in the readme on the repo):

https://manthrax.github.io/monkeypaint/index.html?1

3 Likes
6

thanks a lot it looks awesome. i updated it and added credits in my repo. send yout github if possible so i can add the link. Thanks a lot dude

7

thank you i didnt think of github pagesm but there is a problem, i uploaded on netlify and works perfectly but on github paes it doesnt how the earth moon and stars. Any idea why?

8

When I try to load it, I see this in the dev console network tab:

image
image2280×1374 218 KB

It’s trying to load OrbitControls from your repo, but the node_modules directory isn’t in the repo.
You can either add the “node_modules” from your local repo to the github repo ( might make the repo a bit messy and bloated )

Or you can add an importmap to your html file that tells it where to load the threejs things from.

for instance:

        <script type="importmap">
		{
			"imports": {
         	"three": "./libs/three.module.js",
        	"three/addons/": "./libs/examples/jsm/"
			}
		}
	</script>

and then put three.module.js and the files that you are using into a “libs” folder with the same structure as the threejs library. and check that into your repo.

Once you put that importmap in your html (make sure to put it before any other scripts are loaded…)

Reload your page and watch the consoles network tab for failed file loads… and make note of their path and make sure you’ve copied the same files into your local structure.

Also note how I put "./ before the paths in the importmap. sometimes that is crucial.

1 Like
9

thank you so much!! i had some errors at first but i fixed them, i use raw files from github repo not locally. I appreciate your help!!

10

verry nice!

1 Like
11

If you really have a need to give a credit and link to my repositories then just click the avatar in these posts (the blue circled logo) and you will see a link to my webpage which is hosted on GitHub.

If you visit this webpage yourself then just look under the General menu to see the astronomically inacurrate Celestial page as I have it (this is how I managed to improve yours).