使用 OrbitControls 自动旋转在three.js 中居中枢轴点答案

【问题标题】：Centering pivot point in three.js with OrbitControls autorotate使用 OrbitControls 自动旋转在three.js 中居中枢轴点
【发布时间】：2019-12-29 18:18:34
【问题描述】：

我正在将 .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();

【问题讨论】：

标签： three.js camera gltf

【解决方案1】：

设定目标的正确方法。

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

它应该采用 (aab.getCenter())，因为它返回具有 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

【讨论】：

【解决方案2】：

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

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

three.js R107

【讨论】：