Deploying Threejs site with r132

Questions
1

I have created an index.html but its in the /examples/ folder where I currently have all my files added, and its imports are pointing to /jsm/. Like the other examples in the folder. I want to relocate my index to the build root and repoint its dependecies to the correct place. Also move my newly created files that I put in /jsm/ into the right place too.

My pointers to those files are as follows:

import { OrbitControls } from "./jsm/controls/OrbitControls.js";

Of course, in the deployed version it isn’t seeing these because /examples/ isn’t deployed. I need to move my index.html from /examples/ into the root and repoint my imports to the appropriate folders.
So, to do this what are the steps? I also notice that in the other folders, that are deployed, the closest match to files that were in the /examples/ child folders like /examples/jsm/ and /examples/jsm/utils/ are not there. How to move a file from /examples/ into the deployable folder? Or do I just need to repoint my imports to the root?

I’m trying to deploy to a gitHub/hosting server and although I do get a successful build of ThreeJS /build/ there is nothing shows up on the browser because all of my files (index.html, etc.) are in the non-deployed /examples/.

Sorry for the over-explanation. I just wanted to be clear. Thank you in advance!

2

What bundler are you using? Webpack? Typically you would just install Three.js via Node Package Manager with npm install three and then you’d have everything you need in your project’s node_modules folder. So if you need the core library, you could do:

import * as THREE from "three";

and any other module from the examples folder could be used like this:

import { OrbitControls} from "three/examples/jsm/OrbitControls.js";

Your own code is almost always separate from the libraries you’re using. I’m not sure why you’re moving your index.html file into your /examples/ folder. It has no reason to be there. Are you copy and pasting the "three" folder structure?

3

… I’m truly an idiot. I see now. I always overcomplicate the simplest things. I thought your build process was completely different than it is. Wow I feel dumb lol.

1 Like
4

@marquizzo - Ok, so, I’m still missing something. I thought I had it. And did, in my local, when I moved the index to the root folder. However, I’m deploying to Netlify. They only read the ‘index.html’ from the /build/ folder. So now build looks like this:

/build/
-three.js
-three.min.js
-three.module.js
-index.html

In the index I have my pointers to the modules like so:

import * as THREE from 'three.module.js';
import Stats from './examples/jsm/libs/stats.module.js';
import { GUI } from './examples/jsm/libs/dat.gui.module.js';
import { TWEEN } from "./examples/jsm/libs/tween.module.min.js";
import { OrbitControls } from "./examples/jsm/controls/OrbitControls.js";

However, nothing seems to point correctly. I’ve tried a few variations of the relative pointers but nothing seems to work. What am I doing wrong?

5

Ya, this isn’t working. There is something a little weird about deploying with NPM/ThreeJS. I tried a few things from different posts. I tried using the ./node_modules/three/... approach (doesnt work either).

I am trying the CDN approach now but it seems that its a common issue to have this work properly across certain types of common build servers. Surely, one does not have to change hosting providers to find a working solution.

Netlify is a free solution. They allow deploying straight from GitHub. I’m not promoting or advertising it but simply pointing out that to create a test environment yourself with ThreeJS and trying to create a module deployment of the ThreeJS package is fairly easy to do. Rather than this objective approach (that should work) could someone try an subjective approach and build it themselves and tell me how they got their solution to work? Ideally, I dont want to use a CDN path for obv reasons. Surely there is a way to make this work off the enclosed build files from Three.

Aside from Netlify just trying to make this work at a local build level with the index.html inside of /build/ has the same issues. I cannot get the index to find a correct pointer to three.module.js. Even when its in the same folder. I saw the post from @Mugen87 on not using Bare Includes … so what’s the solution then?

HELP!! I’m sure this is going to be a common issue in the near future. I dont think Three nec needs to keep up with the latest trend in deployment architecture but this ones going to be really common.

Thanks again.

6

I’ve deployed Three.js projects with Netlify before, and they work fine. Since you can’t get it to run locally on your machine, it leads me to believe you’re just struggling with your folder structures and your bundler. I recommend you read the Installation section in the docs to get better acquainted with the setup. I don’t think this is a problem that Netlify or Three.js needs to address.

See this simple demo I’ve created, it’s a standalone JS file, with no node_modules dependencies. It uses import statements to load Three.js core and modules.

import * as THREE from "https://cdn.skypack.dev/three@0.133";
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.133/examples/jsm/controls/OrbitControls.js';

It works just as it should.

7

your paths are all wrong, it’s

import * as THREE from 'three'

not “three.module” and

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

not “./…” which is a local/relative path. it does not matter if you publish to netlify or anything else, that’s not the problem, you’re just messing modules up with these paths and that’s an easy fix.

  1. pick a bundler. any bundler. i recommend vite because it can’t get any simpler than that. npm init vite name your project, pick vanilla.
  2. cd into your new project, npm install three
  3. npm run dev now build your app, if you save in your editor you’ll see it reflected immediately in the browser
  4. when you’re done: npm run build
  5. move the dist folder to netlify

only #1 varies, the other steps are the same for virtually all bundlers out there, parcel, webpack, etc. though again, if you already struggle with imports, use vite because other bundlers, especially webpack, can get quite complex. you’ll make it! :slight_smile:

9

Great call on Vite. After learning how to do it with WebPack I agree that Vite is pretty easy. It took me about a day to really understand it and luckily my case is pretty basic. I ended using up Vite and I love it. You were absolutely right and the paths now all work as you suggested.

Thank you!