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

baker_zhuang

已于 2024-11-18 09:26:35 修改

阅读量551

点赞数 5

分类专栏： ThreeJs 文章标签： ThreeJs MMD

于 2024-05-13 11:09:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/138788942

版权

上个章节通过加载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);
      dir