【问题标题】:ThreeJS change rotation focus of CameraThreeJS改变Camera的旋转焦点
【发布时间】:2014-03-14 04:33:05
【问题描述】:

我在改变 THREEjs 旋转时遇到了困难。我基本上希望我的相机围绕我的对象旋转,而不是围绕标准点(0,0,0?)。原因是我的 Vector3 值相当大.. (x, z, y)

4312872.381146194 66.59563132658498 -25727937.924670007
4312475.124507734 66.59563132658498 -25728638.83021001 
4312004.77886603 133.19126265316996 -25728715.10960813 
4311292.30267081 133.19126265316996 -25728348.26316222
4310580.495996718 199.78689397975492 -25727972.97279594 
4310080.51032912 199.78689397975492 -25727395.118092548 
4309842.889229621 266.3825253063399 -25726583.881802954 
4309162.375115815 266.3825253063399 -25726174.132726204 

我将点与线连接起来,将相机位置设置为边界框并使用 OrbitalControls 移动。但是移动相机并没有集中在我的线几何上。如何更改旋转行为?谁能让我走上正确的道路?

var renderer,
    scene,
    camera,
    controls

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex( 0xeeeeee, 1.0 );

scene = new THREE.Scene();

var material = new THREE.LineBasicMaterial({
    color: 0xff00cc,
    fog: true
});
var geometryL = new THREE.Geometry();

然后我将我的数据推送到几何...

var line = new THREE.Line(geometryL, material);


geometryL.computeBoundingBox();
var bBox = geometryL.boundingBox;
console.log(bBox);
var x_max = bBox.max.x;
var y_max = bBox.max.y;
var z_max = bBox.max.z;

scene.add( line );

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 5000000);
camera.position.set( x_max*1.01, y_max*1.01, z_max*1.01 );  

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', animate );

controls.rotateSpeed = 0.01;
controls.zoomSpeed = 0.01;
controls.panSpeed = 0.08;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = true;
controls.dynamicDampingFactor = 2;

animate();

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

【问题讨论】:

    标签: javascript camera rotation three.js


    【解决方案1】:

    只需将相机应旋转的对象的位置添加到相机的位置即可。

    camera.position.set( x_max*1.01, y_max*1.01, z_max*1.01 ).add(YourObject.position.clone());
    

    您也可以尝试更改控件的目标:

    controls.target = YourObject.position.clone();
    

    我希望我理解你的正确,因为我目前无法运行你的代码。

    【讨论】:

    • 垫子,感谢您的时间和回答。我尝试了您的两种方法,但到目前为止都不走运。我必须先在我的行中添加一个位置,对吗?喜欢line.position.set(x,y,z);
    • 让它工作,我只需要更改controls.rotateSpeed = 0.3controls.zoomSpeed = 0.2controls.panSpeed = 0.05,它们设置得太慢了。诀窍是 controls.target = YourObject.position.clone() 感谢 Mat!
    猜你喜欢
    • 1970-01-01
    • 2020-06-19
    • 2015-05-03
    • 1970-01-01
    • 1970-01-01
    • 2019-10-21
    • 2023-03-27
    • 1970-01-01
    相关资源
    最近更新 更多