How to deploy three js project on Github? Please help

Questions
1

Hallo

The project works fine locally

three
three2059×1721 341 KB

but after uploading on github pages my page is blank. Only html seems to work and javascript dosen’t. Please let me know if anyone knows how to fix this.
three2
three22097×1722 358 KB

:slight_smile:

2

If you open the console in the browser’s developer tools, you can see the error: "Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “…/”.

In your main.js file you are calling ‘three’ which the browser doesn’t understand, I recommend changing the imports to links to the JS files:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

It should be something like: import * as THREE from './example/three.js'

3

it does not really matter what the browser understands, messing with imports manually would not be feasible and have a thousand downsides. you also don’t copy dependencies like three or worse, examples/jsm. this would yield megabytes of untranspiled data - and again, changing all imports by hand would be hell.

web pages/app are always bundled. you copy the dist folder up and it will work. vite, parcel, webpack, rollup, does not matter which tool but it has to go through it.

4

three 3
three 3825×109 13.8 KB

you are right that is error

import ‘./style.css’;
import * as THREE from ‘three’;
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls’;

that is my import files in JS ,did i need to change so:

import ‘./style.css’;
import * as THREE from ‘./three’;
import { OrbitControls } from ‘./three/examples/jsm/controls/OrbitControls’;

??? thanks for your time

5

i try wit gh-pages i try with dist or something i did wrong or that is not solution for my problem.
I tried to insert the whole node_modules not wortk. but that what seid Mr Gilad it seems logical to me. thanks you