OrbitControls 目标改变，使用 Three.js

编程问答 2022-11-23

问题描述

当我改变轨道控制对象“控制”的目标时，当我使用鼠标右键按住时，所有对象都在移动。相反，我希望相机只是在所有物体周围移动。这是代码，结果在我的代码笔上：https://codepen.io/blijzijn/pen/ExmmVaM 也请查看那里的代码。谢谢

请注意，当您第一次加载它时，您的鼠标右键保持“有效”，但是当您左键单击一个对象时，当您按住鼠标右键单击时，一切都会开始移动。

var BoxGeometry = new THREE.BoxGeometry(1,1,1);
var BoxMaterial = new THREE.MeshLAmbertMaterial({color: 
0xF7F7F7});
var BoxMesh = new THREE.Mesh(BoxGeometry,BoxMaterial);
BoxMesh.position.set(0,0);
BoxMesh.name = "Box";

scene.add(BoxMesh);

var sphereGeometry = new THREE.SphereGeometry(0.50,32,32);
var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = mapTexture;
var sphereMesh = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphereMesh.position.set(0,0);
sphereMesh.name = "globeSphere";

scene.add(sphereMesh);

var light = new THREE.PointLight("#ffffff",2,1000);
light.position.set(3,3)
scene.add(light);

camera.lookAt(BoxMesh.position); 

var controls = new THREE.OrbitControls( camera,renderer.domElement );

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

这里是带有函数和 requestAnimationFrame 循环的事件：

document.addEventListener("click",onMouseClick);

function onMouseClick(event) {
     event.preventDefault();

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 
1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 
+ 1;

raycaster.setFromCamera(mouse,camera);

var intersects = 
raycaster.intersectObjects(scene.children);
    try {   
        if (intersects[0].object.name != "") {
            controls.target = 
            intersects[0].object.position;
            controls.update();
        
        }
    } catch(e) {
    
    }
};

var render = function () {
    requestAnimationFrame(render);

    controls.update();
    sphereMesh.rotation.x += 0.004; 
    sphereMesh.rotation.y += 0.004; 

    renderer.render(scene,camera);
}

render();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

controlscontrolscontrolsjavascriptthree.js