Question

当我启动脚本时，相机具有起始值。当我移动它并单击按钮来设置startign值时，它永远不会相同。我错过了什么价值观？

我想，最好的方法是查看example。

我使用console.log来重新映射摄像机值。

HTML：

<button id="buttonTest">
TEST
</button>
 Please, move cube before click!
<div id="wrapper">

</div>

JS：

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {
        window.wrapper = document.getElementById('wrapper');
    var buttonTest = document.getElementById('buttonTest');
    buttonTest.addEventListener('click', function() {
        test();
    });

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({
        preserveDrawingBuffer: true 
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(new THREE.Color("hsl(193, 50%, 57%)"));

    wrapper.appendChild(renderer.domElement);

        controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.rotateSpeed = 4.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.1;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
    controls.keys = [ 65, 83, 68 ];
    controls.addEventListener( 'change', render );

     console.log('camera_default: '+camera.position.x+', '+camera.position.y+', '+camera.position.z);
    console.log('quaternion_default: '+camera.quaternion.x+', '+
            camera.quaternion.y+', '+camera.quaternion.z+', '+camera.quaternion.w);
}

function animate() {

    requestAnimationFrame(animate);
    controls.update();
    render();

}

function render() {
        camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

function test() {
        // lines below shows actual settings
    console.log('camera_now: '+camera.position.x+', '+camera.position.y+', '+camera.position.z);
    console.log('quaternion_now: '+camera.quaternion.x+', '+
            camera.quaternion.y+', '+camera.quaternion.z+', '+camera.quaternion.w);

    window.setTimeout(function() {
        // this is recovering camera values like
        // it was on the sart of script
        // it is not enought, what I missed?
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 500;
        camera.quaternion.x = 0.0;
            camera.quaternion.y = 0.0;
            camera.quaternion.z = 0.0;
            camera.quaternion.w = 1.0;

        console.log('camera_recover_default: '+camera.position.x+', '+camera.position.y+', '+camera.position.z);
        console.log('quaternion_recover_default: '+camera.quaternion.x+', '+
            camera.quaternion.y+', '+camera.quaternion.z+', '+camera.quaternion.w);
        },1500);
}

Answer 1

务必重置相机的up向量。当您致电camera.lookAt时，它会使用up向量来计算新的旋转矩阵，然后将其应用为四元数。

camera.up.set(0, 1, 0);

重置position / quaterion后添加，相机应显示在起点。

Answer 2

我建议只做controls.reset()，它应该解决你的问题。

替换

 camera.position.x = 0;
 camera.position.y = 0;
 camera.position.z = 500;
 camera.quaternion.x = 0.0;
 camera.quaternion.y = 0.0;
 camera.quaternion.z = 0.0;
 camera.quaternion.w = 1.0;

与

controls.reset();

Three.js恢复相机值

2 个答案: