web-dev-qa-db-fra.com

Three.js - OrbitControls ne fonctionne pas

Si j'exécute le script, la console m'affiche "TROIS.OrbitControls n'est pas un constructeur".

enter image description here

Qu'est-ce que j'ai mal? J'ai utilisé le même code d'un manuel.

var controls;
    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
                //Hier wird die Größe des Fensters manipuliert!
    renderer.setSize(window.innerWidth - 20, window.innerHeight - 20);

};

    var animate = function () {
        requestAnimationFrame( animate );
        controls.update();                  
    };


var geometry1 = new THREE.BoxGeometry( 10, 10, 10);
var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
var box = new THREE.Mesh(geometry1, material);


scene.add(box);   

camera.position.z = 50;


render();   
animate();
javascriptthree.js
18
Ramón Wilhelm

Vous devez explicitement inclure OrbitControls dans votre application.

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

Lisez également attentivement les commentaires de l'exemple three.js OrbitControls afin de comprendre quand utiliser

controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)

et quand utiliser

controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

http://threejs.org/examples/misc_controls_orbit.html

three.js r.72

19
WestLangley

J'ai eu le même problème avec une version webpack de la bibliothèque three

var THREE = require('three')
THREE.OrbitControls === undefined  // true

Solution, installez un contrôle orbital tiers

npm install three-orbit-controls

détails ici: https://github.com/mattdesl/three-orbit-controls

puis changez le fragment de code ci-dessus en

var THREE = require('three')
var OrbitControls = require('three-orbit-controls')(THREE)
OrbitControls === undefined  // false

ok, pas le meilleur exemple, mais lorsqu'il est appliqué à la place de THREE.OrbitControls, ça marche très bien;)

10
FraggaMuffin

https://github.com/nicolaspanel/three-orbitcontrols-ts :

npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'

orbitcontrols devrait être installé séparément en angulaire, ce problème me dérange pendant plusieurs jours.

5
Tethys Zhang