如何解决OrbitControls 目标改变,使用 Three.js
当我改变轨道控制对象“控制”的目标时,当我使用鼠标右键按住时,所有对象都在移动。相反,我希望相机只是在所有物体周围移动。这是代码,结果在我的代码笔上: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 举报,一经查实,本站将立刻删除。