如何使对象与光标对面旋转？

发布于 2025-01-18 18:36:38 字数 715 浏览 1 评论 0原文

我目前有一组来自object3d的立方体，其原点是枢轴点：

我的目标是旋转光标位置相对的立方体。例如，如果光标位于立方体的左侧，则立方体将在y轴（绿色轴）周围逆时针旋转。如果光标在立方体上方，则它将围绕X轴（红色轴）逆时针旋转。目前，我试图通过设置“ Mousemove”活动听众来实现此目标；但是，它仅在鼠标移动时起作用：

document.addEventListener("mousemove", onDocumentMouseMove, false);
var mouse = new THREE.Vector2();
function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    {...rotations}
}

有没有一种方法可以在三js中实现它？

原文

I currently have a set of cubes all contained by an Object3D with the origin being the pivot point:

My goal is to rotate the cube opposite the position of the cursor. For example, if the cursor were on the left side of the cube, then the cube would spin counter-clockwise around the y-axis (green axis). If the cursor were above the cube, then it would spin counter-clockwise around the x-axis (red axis). Currently, I have attempted to implement this by setting up a "mousemove" event listener; however, it only works when the mouse is moving:

document.addEventListener("mousemove", onDocumentMouseMove, false);
var mouse = new THREE.Vector2();
function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    {...rotations}
}

Is there a way to implement this in three.js?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

内心激荡 2025-01-25 18:36:38

更容易的方法是检测光标位置，然后将对象旋转设置为倾斜，或者如果要旋转，则可以使用 mesh.rotate

document.addEventListener("mousemove", onDocumentMouseMove, false);

var mouse = new THREE.Vector2();
    
function onDocumentMouseMove( e ) {  
    
    e.preventDefault();
    mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
      
       
}
    
    
function animate() {
         
            mesh.rotation.set(
                (mouse.y * -0.4),
                (mouse.x * -0.8),
                0,
            )
    
}

Easier way is to detect cursor position and then set object rotation to tilt, or if you want to rotate, you can use mesh.rotate

document.addEventListener("mousemove", onDocumentMouseMove, false);

var mouse = new THREE.Vector2();
    
function onDocumentMouseMove( e ) {  
    
    e.preventDefault();
    mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
      
       
}
    
    
function animate() {
         
            mesh.rotation.set(
                (mouse.y * -0.4),
                (mouse.x * -0.8),
                0,
            )
    
}

回复收藏 0 原文

~没有更多了~