I am facing an issue with OrbitControls.js when trying to apply it to a loaded camera in a three.js scene. While the camera and model load successfully, the OrbitControls.js seem to work only with cameras created directly in the three.js using new THREE.PerspectiveCamera(). Below is the code snippet, where I have commented out the play() function for testing purposes.
var container, stats, clock, controls;
var camera, scene, renderer, mixer;
init();
animate();
controls.update();
function init() {
container = document.getElementById( 'container' );
scene = new THREE.Scene();
clock = new THREE.Clock();
var loader = new THREE.GLTFLoader();
var ruta = 'file.gltf';
loader.load( ruta, function ( data ) {
handleSceneLoaded(data);
var animations = data.animations;
var avatar = data.scene;
mixer = new THREE.AnimationMixer( avatar );
NumberOfAnimations = animations.length;
for ( var i=0; i<NumberOfAnimations; i++){
//mixer.clipAction( animations[ i ] ).play();
}
scene.add( avatar );
} );
//
scene.background = new THREE.Color( 0xefe3a7 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function handleSceneLoaded(data){
scene.add(data.scene);
var result={};
data.scene.traverse(function(n){traverseScene(n,result);});
if (result.cameras && result.cameras.length){
camera = result.cameras[0];
controls = new THREE.OrbitControls(camera);
controls.screenSpacePanning = true;
}else{
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 15, 10, - 15 );
}
if(result.lights && result.lights.length){
for (i=0;i<result.lights.length;i++){
var lamp = result.lights[i];
scene.add(lamp);
}
}else {
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, .8 );
directionalLight.position.set( 1, 1, - 1 );
scene.add( directionalLight );
var directionalLight2 = new THREE.DirectionalLight( 0xffffff, .8 );
directionalLight2.position.set( -5, -5, 10 );
scene.add( directionalLight2 );
}
}
function traverseScene(n, result){
if (n instanceof THREE.Camera){
if(!result.cameras)
result.cameras = [];
result.cameras.push(n);
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta();
if ( mixer !== undefined ) {
mixer.update( delta );
}
renderer.render( scene, camera );
}
Edit1: I eventually resolved the issue by assigning the loaded camera to a variable blenderCamera and then creating a real camera where I copied the values from the loaded camera and its parent:
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
blenderCamera = result.cameras[0];
camera.position.x = blenderCamera.parent.position.x;
camera.position.y = blenderCamera.parent.position.y;
camera.position.z = blenderCamera.parent.position.z;
camera.aspect = blenderCamera.aspect;
camera.fov = blenderCamera.fov;
camera.far = blenderCamera.far;
camera.near = blenderCamera.near;