六、如何让卡片一直对着摄像头

        上期我们创建了卡片，那么如何让卡片一直面向浏览器。这个交互有一部分公司还是很需要的，今天我们就来讲讲，先看效果图

在animate.js里面增加卡片Mesh的LookAt，代码如下

import camera from "./camera";
import renderer from "./renderer";
import controls from "./controls";
import scene from "./scene";
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min'

function animate () {
  controls.update();
  TWEEN.update();
  requestAnimationFrame(animate);
  // 使用渲染器渲染相机看这个场景的内容渲染出来
  renderer.renderer.render(scene, camera);
  renderer.css3drender.render(scene, camera);
  scene.children.forEach(element => {
    if (element.type == 'Object3D') {
      // gsap.to(element.rotation, {
      //   duration: 0.1,
      //   // y: controls.object.rotation._y + Math.PI / 4,
      //   repeat: 1,
      //   ease: "none",
      // })
      //让卡片一直面向摄像头
      element.lookAt(camera.position);
    }
  });
}

视频稍后添加

以上就是让卡片面向摄像头的方法，其实就是使用lookAt方法传入视频对象的位置即可。