How do you turn this raw file into a vite project that you can actually use?

I have an example of a fps game it has an octree that works but i cant for the life fo me figure out how to put it into a vite project and get it to run?

These are the steps you have to go through in order to make the project run on vite:

  1. Run npm vite init in the shell to initiate the vite directory
  2. Select Vanilla, enter your project name and after that select JavaScript since the project is made in .js.
  3. Next you have to cd into the vite directory, in order to install the packages and modify the files.
  4. After entering the vite directory run the command npm install
  5. After that inside the index.html delete style.css, main.js, counter.js and javascript.svg file.
  6. Inside the index.html file remove everything and paste the games_fps.html code in the index.html.
  7. Create a new main.css file and paste this main.css code in that.
  8. Now inside the index.html replace:
<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

with:

		<script type="importmap">
			{
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm//three@0.165.0/examples/jsm/",
        }
      }
		</script>
  1. Now just run npm run dev and you are good to go.
2 Likes

THANK YOU SO MUCH! I didnt expect someone to respond. You are my HERO!!!

1 Like