Three.js案例从0到1对象跟随鼠标动起来

Posted 2022-02-25 pocean2012

1. 主程序添加监听器

//添加监听器

   document.addEventListener('mousemove', handleMouseMove, false);

2. 定义鼠标位置变量

// 定义鼠标位置的全局变量
var mousePos=x:0, y:0;

3. 定义鼠标移动时的事件处理

// mousemove 事件处理函数
function handleMouseMove(event) 

// 这里我把接收到的鼠标位置的值转换成归一化值，在-1与1之间变化
   // 这是x轴的公式:

var tx = -1 + (event.clientX / WIDTH)*2;

// 对于 y 轴，我们需要一个逆公式
   // 因为 2D 的 y 轴与 3D 的 y 轴方向相反

var ty = 1 - (event.clientY / HEIGHT)*2;
mousePos = x:tx, y:ty;

4. 在动画更新里增加更新飞机位置的处理函数

function animate() 
    requestAnimationFrame(animate);
    //海浪效果
    sea.mesh.rotation.z += .005;
    //螺旋桨效果
    airplane.propeller.rotation.x += 0.3;
    //天空效果
    sky.mesh.rotation.z += .01;
    updatePlane();
    
    renderer.render(scene, camera);


;

5. 定义处理函数

通过归一化让飞机在一定区域内随鼠标移动

// 处理飞机位置变化


function updatePlane()
  // 让我们在x轴上-100至100之间和y轴25至175之间移动飞机
 // 根据鼠标的位置在-1与1之间的范围，我们使用的 normalize 函数实现（如下）
   var targetX = normalize(mousePos.x, -1, 1, -100, 100);
   var targetY = normalize(mousePos.y, -1, 1, 25, 175);
    // 更新飞机的位置
    airplane.mesh.position.y = targetY;
    airplane.mesh.position.x = targetX;
    airplane.propeller.rotation.x += 0.3;
 
 // 归一化
 function normalize(v,vmin,vmax,tmin, tmax)
    var nv = Math.max(Math.min(v,vmax), vmin);
    var dv = vmax-vmin;
    var pc = (nv-vmin)/dv;
    var dt = tmax-tmin;
    var tv = tmin + (pc*dt);
    return tv;
    
    
    

大功告成， 完成了飞机跟随鼠标变化移动的操作。