Importing modules

Questions
1

Hello there,

couple of questions,

is this path to the file correct,

‘’’
import { BlendShader } from ‘https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/shader/BlendShader.js’;
‘’’

and when i download the file structure github ( three.js-r125) locally only this module works
‘’’
import * as THREE from ‘./build/three.module.js’;
‘’’

no other js file i am poiniting to locally works , like this , does not work
‘’’
import {EffectComposer} from ‘./postprocessing/EffectComposer.js’;
‘’’
and yes i have copied the EffectComposer.js from three.js-r125/…postprocessing to the project i am working on postprocessing/EffectsComposer.js and pointing this js file

Thanks for the support

2

the path works just fine its me with my typos , and everything else works fine as well,

but i just could not get this to point to the local folder and make it work ,
reckon its best to point to the server for the modules and change the version

3

related

and see
* discourse.threejs.hofk.de Module usage

4

use a bundler. vite, snowpack, parcel, webpack, anything. they’re set up in seconds and all problems will vanish. you don’t need urls, script tags, github downloads, files copied by hand. you install modules via npm. you can now just run and debug it. and last but not least, it can create optimized, minified apps ready for publish.

npm init @vitejs/app

choose an appname, pick vanilla

cd appname
npm install
npm install three
npm run dev

in your index.js do:

import { Scene, Camera, ... } from 'three' 
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
...

that’s it. edit the code and see it hot-reload instantly in the browser.

5

Thanks guys, everything works , even the mouse drag ,
it was basically a mix of importing modules which was breaking the code,

, a question , for production purposes (final server upload of all the .js files/html/css) would it be ok using
a call to https://threejsfundamentals.org/threejs/resources/threejs/r125/examples/jsm/…
to import modules

Thanks

6

Hi drcmda,

thanks for this ,
have a couple of questions regarding the bundler,
and most importantly how do i run the three r125 ( which is the stable release ?) with the bundler ?

(where do i run this , it globally in the command shell, or inside the project terminal shell),

npm init @vitejs/app

choose an appname, pick vanilla ( what is this name stand for and what does this do and where do i run this )

cd appname
npm install

this installs three and all the necessary dependencies ?

npm install three
npm run dev

and where do i run

 npm run dev

thanks

7

yes, that’s exactly how it works. version management is done in package.json. latest three is 127. if you wanted to update just change the version and type “npm install” and et voila, you’d have the new version.

1 Like