three.js 围绕一个变化的轴轨道对象

Question

我有一个简单的 3D 对象，我可以旋转，即用鼠标左键围绕轴中心移动 - 工作正常。当我使用鼠标右键平移时，轴也会移动，因此它不再围绕当前轴移动。

无论我将对象拖动到何处，我如何才能围绕其当前轴移动对象？ 下面是script.js的完整代码

var scene = new THREE.Scene();

var axisHelper = new THREE.AxisHelper(100);
scene.add(axisHelper);

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.y = -200;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
keyLight.position.set(-100, 0, 100);

var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);

var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();

scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('assets/');
mtlLoader.setPath('assets/');
mtlLoader.load('180319_object01.mtl', function (materials) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('assets/');
    objLoader.load('180319_object01.obj', function (object) {
    object.scale.set( 200, 200, 200 );
    scene.add(object);


    object.position.x = -100;
    object.position.y = -100;
    object.position.z = 0;
    });
});

var animate = function () {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render(scene, camera);
};

animate();

Answer 1

这是因为您的相机是由控制器而不是物体本身移动的，而不是更新相机的位置和方向（（即轨道控制器正在执行的操作）。在您的渲染方法中，您需要更新对象本身的位置和欧拉角以达到所需的效果。为此，您需要在对象（模型）空间中跟踪和更新围绕对象（y？）轴的位置和旋转角度.希望这是有道理的，如果您需要我详细说明，请告诉我。