Issue importing addons into js project(first person control)

Questions
, , , ,
1

This is my first time using Three.js and I don’t know how to add firstpersoncontrols into my project.
I’ve checked so many videos and nothing makes sense. I’m not sure what next to do

4
41160×935 62.5 KB

3
31217×893 49.2 KB

2
21394×985 34.8 KB

1
11278×1019 68.6 KB

2

you don’t copy dependencies into your project, dependencies are on npm, javascripts package manager. dependencies often have sub and sub-sub etc dependencies, managing this by hand would be an exercise in frustration. npm is generally used through tooling (npm === node-package-manager).

it’s explained in the docs three.js docs

use option 1.
given you have node installed, open shell:

npm create vite
# choose projectName
# pick javascript
cd projectName
npm install three @types/three
npm run dev

open your editor, edit, every change you make will be reflected in the browser.

ps
they also have option 2, but that’s more complicated, would require tooling anyway (servers etc) and it would shut you out of the npm eco system.

3

oh, I’m not sure I fully understand what dependencies are. But I did that, it opened the vite App. But is it possible to open it through the serverz app? it showed an error when i tried to. and where can I import the firstpersoncontrols, so I can use it? thank you so much

5
51802×917 24.5 KB

error message I got when opened through serverz

4

6
61302×714 52.4 KB

7
71854×940 65.5 KB

5

I don’t know what serverz is, don’t use that whatever it is, better stick to what the docs say. You run a server via npm run dev.

You import three like so

import * as THREE from “three”
6

ok, I’ve done that but i still cant import the firstplayercontrol addon

7 
import * as THREE from 'three'
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls'

i guess you can also use “addons” instead of “examples/jsm” now, never tried it. but either way, just go by the documentation, it’s all in there: three.js docs

Import

FirstPersonControls is an add-on, and must be imported explicitly. See Installation / Addons.

import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';