使用 OrbitControls autorotate 在 three.js 中居中枢轴点

Question

我正在将一个 .glb 模型加载到 three.js，虽然我使用 OrbitControls 让它自动旋转，但我看不到如何更改枢轴点以使旋转模型居中。

我看到很多关于设置带旋转的框或枢轴点的问题，但没有看到关于 OrbitControls 和自动旋转的问题。有没有办法让我按照下面的代码使用自动旋转将导入的模型居中？

var scene = new THREE.Scene(); 

 // Load Camera Perspective
var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 8000 );
camera.position.set( 200, 100, 0 );

 // Load a Renderer
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setClearColor( 0xC5C5C3 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

 // Load the Orbitcontroller
var controls = new THREE.OrbitControls( camera, renderer.domElement ); 

camera.position.set( 60, 20, 100 );
controls.update();

controls.autoRotate = true;

controls.minDistance = 700;
controls.maxDistance = 2000;
//controls.update();

 // Load Light
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );

var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );              

 // glTf 2.0 Loader
var loader = new THREE.GLTFLoader();                
loader.load( 'BTR.glb', function ( gltf ) {                  

var object = gltf.scene;                
gltf.scene.scale.set( 1, 1, 1 );               
gltf.scene.position.x = 0;                  //Position (x = right+ left-) 
gltf.scene.position.y = 0;                  //Position (y = up+, down-)
gltf.scene.position.z = 0;                  //Position (z = front +, back-)

scene.add( gltf.scene );

}); 

function animate() {

    // required if controls.enableDamping or controls.autoRotate are set to true
    controls.update();
    render();
    requestAnimationFrame( animate );
    }

function render() {

    renderer.render( scene, camera );
    }

render();
animate();

Answer 1

我认为可以通过将 Controls.target（焦点）设置为 glTF 资产的中心点来解决这个问题。您应该可以这样做：

var aabb = new THREE.Box3().setFromObject( gltf.scene );
aabb.getCenter( controls.target );
controls.update();

three.js R107

Answer 2

设置目标的正确方法。

var aabb = new THREE.Box3().setFromObject( gltf.scene );
controls.target.set(aabb.getCenter());
controls.update();

它应该采用 (aab.getCenter())，因为它 returns 具有 3 个轴值的 vector3。但是我发现这对我不起作用，所以我使用了以下

    let aabb = new THREE.Box3().setFromObject( gltf.scene );
    let aabbc = aabb.getCenter()
    controls.target.set(aabbc.x, aabbc.y, aabbc.z);
    controls.update();

只是分为 3 个值，如果你遇到困难，只是 console.log(whateveryourstuckwith) 并通读方法、变量和其他东西，真的帮助我理解了 Three.js 更多

使用 OrbitControls autorotate 在 three.js 中居中枢轴点

Centering pivot point in three.js with OrbitControls autorotate

camera

three.js

gltf