代码之家  ›  专栏  ›  技术社区  ›  Michal

在不更改视图方向的情况下设置三个透视摄影机的距离

  •  1
  • Michal  · 技术社区  · 7 年前

    PerspectiveCamera 在空间中的某个地方,作为网格的子对象。摄影机仍应查看网格(局部坐标[0,0,0])。我希望在不改变视图方向的情况下更改摄影机与网格的距离。有什么简单的方法可以做到这一点吗?

    camera.position.z = 13 // Works only if position.x and position.y are 0.
    camera.setDistanceFromTarget(13) // I need something like this.
    

    我只是想手动计算实际相机的旋转角度和新相机的位置。这是 fiddle .

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild(renderer.domElement);
    
    var geometry = new THREE.BoxGeometry(3, 3, 3);
    
    var cube = new THREE.Mesh(geometry);
    scene.add(cube);
    cube.add(camera);
    
    camera.position.set(2, 4, 6)
    camera.lookAt(cube.position)
    
    function animate() {
    	requestAnimationFrame(animate);
    	renderer.render(scene, camera);
    }
    
    animate();
    
    // How to set distance of camera from [0, 0, 0] to 13 without change view direction?
    camera.position.z = 13;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset=utf-8>
    		<title>THREE.js camera demo</title>
    	</head>
    	<body>
    		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
    	</body>
    </html>
    1 回复  |  直到 7 年前
        1
  •  1
  •   stdob--    7 年前

    你需要 normalize scalarly multiply 按所需的长度:

    camera.position.normalize().multiplyScalar(13)
    

    [ https://jsfiddle.net/0jnw5guo/ ]