javascript - 如何在three.js中垂直定位相机

Question

我有一个从屏幕中心开始的模型，但我想从底部开始显示它。我试图改变perspectiveCamera，最大和最小距离以及场景比例，但到目前为止我无法弄清楚。这是代码

        // renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // renderer.outputEncoding = THREE.sRGBEncoding;

        // scene
        scene = new THREE.Scene();

        // camera
        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(0, 0, 40);

        scene.add(camera);

        // controls
        var controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render);
        controls.minDistance = 10;
        controls.maxDistance = 95;
        controls.enablePan = true;

        // ambient
        scene.add(new THREE.AmbientLight(0xffffff, .2));

        // light
        var light = new THREE.PointLight(0xffffff, 1.5);
        camera.add(light);

        new GLTFLoader().load('models/female.glb', function (gltf) {

            gltf.scene.traverse(function (child) {

                if (child.isMesh) {
                    child.material.normalMapType = THREE.ObjectSpaceNormalMap;
                    child.material.side = THREE.DoubleSide;

                    child.visible = true
                }

            });
            gltf.scene.scale.set(4, 4, 4)
            scene.add(gltf.scene);

            render();
        });

模型看起来像这样

标签： javascriptthree.js3d

Answer 1

通过在您的 y 中放置一些合适的数字，将相机向上移动：

camera.position.set(0, 0, 40)

此外，轨道控制可能有一种方法来设置目标对象。