Threejs实现PMD模型眨眼说话等功能

简介: 这篇文章详细介绍了如何在Three.js中实现PMD模型的眨眼和说话等动态效果,通过控制模型的关键帧来模拟面部表情的变化。

上个章节通过加载PMD模型和VMD的动作播放MMD的动画,这节通过js控制让模型实现眨眼,说话。我们还是拿上个模型来操作,首先是创建好Threejs的场景,包括灯光,相机,渲染器等。

 initScene(){
      this.scene = new THREE.Scene();
      this.clock = new THREE.Clock();
      const gridHelper = new THREE.PolarGridHelper( 30, 0 );
      this.scene.add(gridHelper)
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(100,100,100);
      this.camera.lookAt(0,0,0);

      this.listener = new THREE.AudioListener();
      this.camera.add( this.listener );
      this.scene.add( this.camera );
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(-300,-300,600)
      this.scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      this.scene.add(directionalLight2);
    },
  initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#FFFFFF', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);//创建控制器
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度
      this.controls.target = new THREE.Vector3(0, 0, 0);
      this.camera.position.set(100, 100, 100);
      this.camera.lookAt(0, 0, 0);
    },
    initAnimate() {
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(this.scene, this.camera);
    },

然后添加模型,这里不用通过loadWidthAnimation来加载,因为这里不用播放动画,而是直接用load的方法加载,加载好模型后添加到scene场景中。

 initBox(){
      this.helper = new MMDAnimationHelper();
      const loader = new MMDLoader();
      let _this = this
      loader.load( '/static/animal/miku_v2.pmd',function(object){
        let mesh = object;
        _this.scene.add(mesh)
      },null,null)
    },

此时场景中的模型如图:

下面需要添加说话和眨眼的动画了,在模型中有个morphTargetInfluences属性morphTargetInfluences 是一个数组,用于控制模型的形态目标(morph targets)或称为“混合形状”的权重或影响。简单的说就是可以动态控制点的移动形成动画效果,所以我们在加载模型后需要获取到这个数组,不过大家在实践的时候要注意下自己用的模型有没有这个属性以及属性值分别控制的是什么,如果没有合适的模型可以私信我,我把我用的这个模型给你。

_this.face = mesh.morphTargetInfluences

获取到数组后,在动画函数中不断调整值来实现动画效果,比如实现眨眼,那就是要修改一个参数,不断变大,当眼睛闭上时,再延迟一点时间不不断变小把眼睛睁开,这里我直接放代码。

smellEyeAction(){
      if(this.smellEye.show) {
        if (this.face[8] > 1) {
          if (this.smellEye.duration > 20) {
            this.smellEye.duration = 0
            this.face[8] = 0
          } else {
            this.smellEye.duration = this.smellEye.duration + 0.1;
          }
        } else {
          this.face[8] = this.face[8] + 0.02;//笑闭眼
        }
      }
    },

说话的效果和眨眼类似,不过说话嘴型是变化较快,且没有太多规则的,所以这里用随机数,让控制嘴巴的点随机变化,

    talkAction(){
      if(this.talk.show) {
        if(this.talk.duration >20){
          this.talk.duration = 0;
          this.face[24] = Math.random() * 0.6
          this.face[25] = Math.random() * 0.6
          this.face[26] = Math.random() * 0.6
        }
        this.talk.duration = this.talk.duration + 1;
      }
    },

最终要在渲染动画中调用它,为了防止模型没加载出来之前执行,这里加上一点判断,确定数组存在了再执行。

这里不支持上传视频,如果想看动态效果可以私我,我发给你视频

相关文章
|
2月前
ThreeJs设置模型的边线
这篇文章介绍了如何在Three.js中为3D模型添加边线效果,并提供了实现这一功能的代码示例。
50 2
|
7月前
|
编解码 人工智能
DiT架构大一统:一个框架集成图像、视频、音频和3D生成,可编辑、能试玩
【5月更文挑战第23天】研究人员提出Lumina-T2X框架,统一生成和编辑图像、视频、音频及3D内容。使用Flow-based Large Diffusion Transformer (Flag-DiT)模型,实现多模态生成,支持内容编辑。尽管面临训练资源需求高、生成质量不及人类创作等问题,该框架在娱乐、广告等领域有广泛应用潜力。[论文链接](https://arxiv.org/pdf/2405.05945)
119 1
|
机器学习/深度学习 编解码 人工智能
YOLO虚幻合成数据生成器
UnrealSynth 基于 UE5 虚幻引擎开发,目前支持 YOLO 系列模型合成数据的生成。
181 0
|
机器学习/深度学习 编解码 达摩院
【OpenVI-图像超分实战篇】别用GAN做超分了,快来试试基于扩散模型的图像超分吧!
近10年来,深度学习技术得到了长足进步,在图像增强领域取得了显著的成果,尤其是以GAN为代表的生成式模型在图像复原、老片修复,图像超分辨率等方面大放异彩。图像超分辨率是视频增强方面,用于提升画质的典型应用。生成对抗网络GAN使得在图像分辨率增加的同时,保持细节特征,补充生成真实的纹理,其中应用广泛的工作是Real-ESRGAN。 扩散模型DiffusionModel在图像超分辨率这方面的新的应用,展现出其超过GAN的生成多样性和真实性。看完后,你会发现,还在用GAN做图像超分辨率吗?已经OUT了,快来试试DiffusionModel吧!
27067 3
【OpenVI-图像超分实战篇】别用GAN做超分了,快来试试基于扩散模型的图像超分吧!
|
人工智能 数据可视化 机器人
GIF动画渲染、让灯塔闪烁、创建航空动态图……ChatGPT代码解释器插件「不止于代码」
GIF动画渲染、让灯塔闪烁、创建航空动态图……ChatGPT代码解释器插件「不止于代码」
218 0
|
机器学习/深度学习 算法 计算机视觉
CVPR 2022 | 实时渲染、可直接编辑,中科大提出高保真人头参数化模型HeadNeRF
CVPR 2022 | 实时渲染、可直接编辑,中科大提出高保真人头参数化模型HeadNeRF
253 0
|
算法 图形学 开发者
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen(1)
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
177 0
|
存储 缓存 算法
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen(3)
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
131 0
|
存储 数据挖掘 开发者
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen(2)
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
127 0
|
存储 数据挖掘 开发者
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
超逼真渲染!虚幻引擎技术大牛解读全局光照系统Lumen
123 0