Question

我正在使用three.js加载带有摄像机的gltf场景。相机和模型显示良好，但是当我尝试将OrbitControls.js应用到已加载的相机时，它将无法正常工作。它仅适用于通过new THREE.PerspectiveCamera()在Three.js中直接创建的摄像机。我在下面留下了代码，我评论了play()函数只是为了首先尝试。

        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：我终于解决了这一问题，方法是将加载的摄像机关联到变量blenderCamera，然后创建真实的摄像机并从加载的摄像机及其父级中复制值：

        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;

Answer 1

正如您在解决方法中所注意到的那样，似乎Blender的GLTF导出器喜欢为导出的相机创建父对象。

定义连续运行且有意义的轨道摄像机的行为，同时通过其父对象的变换可能同时在场景中移动摄像机是困难的，这也是可以理解的，而且边缘情况也是如此，因此看起来{{1 }}应用于带父对象的相机只会失败。

尝试将相机与其父对象分离：

OrbitControls

这将删除导入的摄像机的父级属性，同时还应用其父级的逆变换矩阵，以便其在场景中的位置和方向保持不变。之后，您还应该能够检查scene.attach(blenderCamera)，这与之前工作的硬编码相机相同。

注意：看来blenderCamera.parent == null是当前取消对象平准化的规范方法。它显然曾经是scene.attach，现在在源代码中已被标记为已弃用。您也可以尝试直接设置SceneUtils.detach，但是在最佳情况下，您可能会丢失父级的转换。只有一个父级转换和零个父级空间转换，您可以通过手动复制坐标来避免这种情况，但是对于更复杂或更健壮的功能，您可能必须自己开始应用转换矩阵。

如何从gltf文件将OrbitControls应用于已加载的摄像机？

1 个答案:

尝试将相机与其父对象分离：