[SOLVED] Requesting help with OrbitControls

Questions
1

Dear reader,

I have recently started using three.js and am trying to get a camera with orbit controls to work as given in the panorama cube example. However when I try to implement it I run into some issues, none of which return an error in the console, and as far as i’m aware i repeat the steps given in the example.

I instantiate my orbit controller as followed: https://pastebin.com/cXyHGV4u

in the pastebin i use new THREE.OrbitControls( camera, renderer.domElement);, but when i click and drag nothing happens. i have tried adjusting this to canvas.domElement which changes the position and rotation of the camera to NaN when i click and drag.

in the example i had autoRotate enabled to see if that worked, but that doesn’t do anything either. i have also tried it with autoRotate disabled

i have made sure that OrbitControls,js is properly loaded. and am also receiving logs from it ( [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. ) but that shouldn’t be the issue here.

Any help would be greatly appreciate.

Thanks for your time!
~Remy

2

I’ve created a fiddle with most of your code for testing purposes: https://jsfiddle.net/f2Lommf5/3050/

Seems to work so far. Maybe there is missing something in the code that causes your problem.

3

Could the issue be with the fact that i am using ‘canvas’ instead of ‘window’?

4

Um, the handling of the canvas element does not look correctly in your pastebin. Try it like this: https://jsfiddle.net/f2Lommf5/3054/

1 Like
5

You have to pass the canvas element to the constructor of WebGLRenderer. Otherwise the renderer internally creates its own canvas element.

2 Likes
6

I see, this has indeed fixed my issue! thanks alot for your quick and clear replies!