在Three.js中向摄像机补间对象 - 这个工作,需要设置新的屏幕位置

时间:2014-11-13 03:35:18

标签: javascript 3d three.js

我有一些代码可以将对象渲染到相机并适合屏幕的一半

    var vFOV = camera.fov * Math.PI / 180; 
    var ratio = 2 * Math.tan( vFOV / 2 );
    var screen = ratio * (window.innerWidth * 0.6 / window.innerHeight * 0.6) ; 
    var size = getCompoundBoundingBox( object ).max.y;
    var width = getCompoundBoundingBox( object ).max.x;
    var dist = (size/screen) * (object.scale.x * 2); 

    //get final position in front of camera
    var pLocal = new THREE.Vector3( 0, 0, -dist );

    //apply the direction the camera is facing
    var target = pLocal.applyMatrix4( camera.matrixWorld );

    //tween the object towards the camera
    var tweenMove = new TWEEN.Tween(object.position).to(target, 1500).easing(TWEEN.Easing.Cubic.InOut);

我需要做的下一件事是能够将其向左或向上移动,用于屏幕上的其他UI和响应元素。

即。把它移到左边的第三个,或者是第三个。它还需要仍然是相机的正方形。

我尝试将pLocal值更改为(1,0, - dist),但这只是在补间时旋转对象。

我是如何添加该功能的?

1 个答案:

答案 0 :(得分:0)

通过在相机左侧添加新外观位置来解决