dreamy thorn
I have tried several ways to install, and I am using the NPM method, I have managed to install the base module but when I try to import the plugin that is where I am getting issues.
Firstly I don't have an "addons" directory, even though your documentation suggests it should, so I am using the examples directory which isn't working, I am getting errors like "Failed to resolve modules specifier 'three'. Relative references must start with / etc"
neat hinge
same issue
hasty vigil
I've the same issue, and I'm using static libraries.
tulip knot
for those wishing to "quick test" plugins without uploading the whole threeJS repo or any crap compilers
disclaimer: this is NOT the intended way, and I'm going to trigger a lot of people here 😁 sorry I don't care lol
put each individual files at the same level of three.module.jsfile
use classic importmap in the html page to have access to three globaly
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./three.module.js",
}
}
</script>
from 'three' instead write from './three.module.js'import * as THREE from 'three';
import { OrbitControls } from './OrbitControls.js';
your folder should look like this:
hollow tangle
the current docs don't give you a workable solution, none of this stuff works.
the upcoming docs are finally moving to vite, it's already merged.
so throw all of this away, you don't use script tags, you don't use import maps, etc, you type
npm create vite
cd yourprojectfolder
npm install three
npm run dev
and you are done
keep in mind that browser esm is an unfinished spec, import maps are not supported in all browsers and need shims, they are impossible to write once you are dealing with sub dependencies, and all of this is incompatible with npm, which is for the most part using cjs, not esm. npm is javascripts eco system, where all the millions of devs share and re-use packages. this isn't something you want to sacrifice.
long haven
I spent more time than I’m willing to admit with this exact issue. Tried at least 5 different ways to install/import three js. Disappointed because all of the best sites I’ve seen use three js and i really wanted to dive into it. Hopefully the method above fixes this in the future
tulip knot
Yup! that's the case for everyone. And npm is not the answer either, especially if you start to edit the sources and go beyond "importing premade stuff"
hollow tangle
I spent more time than I’m willing to admit with this exact issue. Tried at lea...
the current docs are a bit odd. i don't know what they were thinking, or if they have tried it themselves.
thank goodness this is going away with the new docs. using and installing three couldn't be easier with that.
hasty vigil
keep in mind that browser esm is an unfinished spec, import maps are not support...
so we don't have to worry with esm using vite, right? or is there something else we need to setup on the project?
hollow tangle
nope, that's it, vite + npm install three that's it
well, given that you have node installed in order to run npm
hasty vigil
I have it, I have run the commands above and it seems so neat. Can I add another libraries/modules inside a vite app anytime?
hollow tangle
sure
npm install lodash
import defer from 'lodash/defer'
npm will handle and track dependencies
vite will make sure your end bundle only contains the actual code that is being used no matter how many modules you have installed or which parts of them you use
this was finally added to the docs now btw 🎉