three.js/webgl实现室内模型行走

一、加载场景模型带动画的人物模型

        人物模型来自three.js官方示例，其模型中包含多段动画，我们只需要其中的“none”和“walking”，因此我们需要将记录这两段动画在动画数组中的索引。添加模型后，同时播放“none”和“walking”,并将动画“none”的权重设置为1。

 

二、点击确定目标位置

        我们使用three.js中射线相交的方式来获取点击的坐标 ，点击到模型中的地面后，根据点击处的坐标，获取人物行走的目标点。

  handleClick(pixel){
      let intersects = this.getObjectsAtPixel(pixel);
      if(intersects.length != 0){
        let destination= null;
        for(let i=0;ilength;i++){
          let currPoint = intersects[i].point,
            object = intersects[i].object;
            if(object.isFloor){
              destination = currPoint;
              break;
            }
        }
    }
}

三、模型动画播放和模型转向动画

        确定行走目标点后，我们根据当前点位置，确定模型需要旋转的角度，行走动画播放的同时，动画的方式更改模型的旋转角，动画的时间由角度值大小确定。

let turnAnimation =
new TWEEN.Tween(model.rotation).to({			//动画过渡 y 1.8
    y: rotation,
 }, time).onStart(function(){
 }).onUpdate(function (data) {
 }).onComplete(function () {
 });
turnAnimation.start();

五、模型动画过渡

        模型开始行走，将行走动画的权重设置为1，由停止动画过渡到行走动画；模型到达目标点停止，将停止动画的权重设置为1，由行走动画过渡到停止动画。

 me.stopAnimation && me.setWeight(me.stopAnimation,1);
 me.stopAnimation.time = 0;
 me.walkingAnimation.crossFadeTo( me.stopAnimation, 0.35, true );

六、相机跟随

        为了避免相机跟随影响缩放、旋转等控制，这里使用了比较宽松的跟随模式，缩放、旋转确定了相机位置后，模型行走，根据模型的位置，计算出相机 的目标点，再根据原相机目标和相机位置的差值，重新计算相机的位置。

let modelPos = model.position;
let eyePosition = [modelPos.x, modelPos.y, modelPos.z + 1.7];
let originTarget = control.target.clone(),
    originPosition = camera.position.clone();
camera.position.set(eyePosition[0] + originPosition.x - originTarget.x,
              eyePosition[1] + originPosition.y - originTarget.y,
              eyePosition[2] + originPosition.z - originTarget.z);
camera.lookAt(new THREE.Vector3(eyePosition[0], eyePosition[1], eyePosition[2]));

七、障碍检测

        障碍检测，就是在模型行进的过程中，实时检测模型包围盒是否与场景出现相交的情况，也是使用了射线相交的原理，判断包围盒上每个点，在行进方向上的向量上，是否与场景中的物体相交。

八、图片轮播和视频播放

点击场景中的图片开始图片轮播，点击视频开始视频播放。

九、最终效果截图

本案例完全使用three.js实现，代码完全可控，可以根据你的需求再进行调整，有需要的联系。