一、加载场景模型带动画的人物模型
人物模型来自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;i<intersects.length;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实现,代码完全可控,可以根据你的需求再进行调整,有需要的联系。