three-orbitcontrols | js OrbitControls from official repo examples | Augmented Reality library

I'm trying to add OrbitControls, but I always get this error at this instruction:

var controls = new THREE.OrbitControls( camera, renderer.domElement );

I've installed with npm three.js and three-orbitcontrols.js, I've read all the answers but I still can't figure out what I should do. If I use require or import in my jsp page, I still get this problem. I've also tryied using browserify but it didn't help (I got an EPERM error, so maybe I did something wrong?).

Can someone help me? What did I miss?

Edit: I've realized that I wrote OrbitControls.js instead of three-orbitcontrols.js, so sorry about that. Also, if I try to use import console says:" SyntaxError: Cannot use import statement outside a module"

My three.js scene is completely distorted until I move the mouse somewhere on the site. You can see the nature of the distortion on the image below:

When I move the mouse, the scene suddenly pops and everything is fine. It doesn't seem to matter where exactly the cursor is within the site, it doesn't have to be over the canvas where my scene is rendered. This is how the scene looks after moving the mouse:

The following three.js related dependencies are used:

• "three": "^0.108.0"
• "three-orbitcontrols": "^2.102.2"
• "three.meshline": "^1.2.0"

I tried updating three to the latest version (0.116.1), but that didn't solve the issue either. I managed to replicate this issue on Firefox and Edge, but not on Chrome.

Some extra context: we use OffscreenCanvas for better performance, the mouse positions are sent from the main thread to the web worker on mousemove event, we use that information to slightly move the camera and the background (with offsets). I temporarily removed to mousemove handler logic from the web worker code and the issue still popped up, so it's probably unrelated. We use tween.js to make the camera animations smooth.

Relevant code snippets:

Scene setup:

I'm trying to implement a unit test using jest along side vuejs framework on symfony/webpack-encore, but after multiple attempts, I still get this error :

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

import {
^

SyntaxError: Unexpected token {

20 |
21 | import * as THREE from 'three';

22 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
| ^

.babelrc :

Has anyone tried using the OrbitControls function with ReactJS? Here is the sample code I wrote:

Trying to get Angular to work in IE 11. I tried everything I found on the web already.

I'm getting the following errors:

SCRIPT1002: Syntax error

File: polyfills.js, Line: 2358, Column: 1

Line 2358

I wanted to implement the code from this video: https://www.youtube.com/watch?v=nPEYdw2Ssa8 (you can download it from here https://codepen.io/i2801/pen/waQPQj) but using React. I had no luck and got error:

I'm using the ThreeJS library together with React.

I've installed ThreeJS using npm.

Adding images works fine - I'm importing an image in react like this:

I need to customize an existing @types/three as per my needs. I cloned the entire @types/three in my src/typings and npm rm @types/three. tsconfig.json looks at both node_modules/@types and src/typings

However, the declaration module does not resolve to 'three'.

Here is the typings/three/index.d.ts: