OrbitControls problem

Questions
,
1

Hello, i have a little problem with my code.
I want to control my object but when i put this in my code
** var controls = new OrbitControls(camera, rendu.domElement );

controls.update();**

everything crash…

Here is my code :

var scene = new THREE.Scene();

// 35 = ajuster le champs de vue, grosseur de la fênetre, 3000 = trop proche ou trop loin le rendu s’arrête

var camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 3000);

camera.position.set(0, 0, 100);

var rendu = new THREE.WebGLRenderer();

// grosseur du rendu

rendu.setSize(window.innerWidth, window.innerHeight);

rendu.setClearColor(0x132644);

// mettre le rendu dans le document html

document.body.appendChild(rendu.domElement);

//Rendre la scene + camera

rendu.render(scene, camera);

// ----------------------Création élément 3D------------

// Création d’un groupe pour regrouper les élement 3D = Matériels

var forme = new THREE.Group();

// 4 paramètres : rayon, grosseur du tube, nbr de segments, nbr de segments au long du tube

var geometries = new THREE.TorusKnotGeometry(10, 3, 100, 16);

// création matériel par défaut en arc-en-ciel

var materiel = new THREE.MeshNormalMaterial({

wireframe: true,

wireframeLineWidth: 5,

wireframeLinejoin : ‘round’,

wireframeLinecap : ‘round’

});

// On ajoute le matériel dans la forme

forme.add(new THREE.Mesh(geometries, materiel));

// On ajoute la forme dans la scène

scene.add(forme);

// Pour contrôler la caméra

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

controls.update();

// ANIMATION

var animer = function() {

requestAnimationFrame(animer);

forme.rotation.x += 0.005;

forme.rotation.y += 0.008;

rendu.render(scene, camera);

};

animer();

Thanks for the help

2

Here’s an example code for orbit controls. You must import OrbitControls separately, it is not a part of core three.js.

3

I know it’s already in my folder and my HTML :

<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script src="script.js"></script>

and in the console they say that : script.js:42 Uncaught ReferenceError: OrbitControls is not defined
at script.js:42

4

Hello! If you can recreate your issue in a basic fiddle example, it will help us visualize the issue. The basic fiddle starter is linked in the GitHub issues.

Thank you,

Chris

1 Like
5

The file OrbitControls is not loaded then - does it exist in the same directory as three.js file ?

6

Yes it is in the same directory

7

Orbit Controls is not bundled directly afaik, I would say people generally include it from the three module. Does it work with the CDN link?

   import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

Chris

1 Like
10

It worked !! with the import ! Thank you