微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

OrbitControls 目标改变,使用 Three.js

如何解决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 举报,一经查实,本站将立刻删除。