Threejs应用：塔防游戏

最近玩红警3，1v5个凶残电脑，竟然赢了。心血来潮想开发一款threejs的塔防游戏，实践并提高自己的对threejs的应用能力，完善threejs技术储备。

本文章2024年1月15日创建，以此时间节点开始制定学习开发计划，时间为2周，1月底完结。

20240122 更新

今天创建了项目仓库，名字暂定为plan。使用react-cli创建，用threejs.

20240123 更新

用GridHelper去创建了坐标地图 增加了一个cube 编写了生成一个向上漂浮并淡出的动效vapourEffect，可以传入一个Widget和持续时间second，后期想更换成一些小图片icon，比如⚡️、绿叶和小水滴等等。

距离1月底还有6天，我看了一下节前的工作内容，节后抛开年会还能增加8天的开发时间。

20240124

现在是早上9点14分，今天的计划是

1. vapourEffect2 从第一版本的代码中优化，这次可以带入widget。
2. 优化widget的动效，使其更协调。
3. 优化widget的载入数量，最少1个。
4. 新增一个点击widget给予显示选中的函数。
5. 贴图绿色地图。

现在是下午13:54分，现在的计划是 一个风力发电设备

20240125

今天更新了一个风力发电机，模型是我从网上找的 优化了vapourEffect2改为了outputData表示展示一个生产指标的方法。

/**
 * 展示产量数据
 */
export const outputData = (widget: THREE.Mesh, type: string) => {
  const size = getWidgetSize(widget);
  const position = widget.position;
  const icon = iconWidget({ width: size.x * 0.2, height: size.x * 0.2 });
  icon.position.set(position.x, position.y + size.y, position.z);
  const fromData = {
    y: icon.position.y,
    opacity: 1,
  };
  const toData = {
    y: icon.position.y + +size.y * 0.1 + 1,
    opacity: 0,
  };
  const animation = gsap.to(fromData, {
    duration: 1,
    ...toData,
    repeat: -1,
    onUpdate: () => {
      icon.position.y = fromData.y;
      if (fromData.opacity < 0.2) {
        icon.material.opacity = opacityHandler(fromData.opacity, 0.2, 0, 1, 0);
      } else {
        icon.material.opacity = 1;
      }
    },
  });
  return {
    animation,
    iconWidget: icon,
  };
};

/**
 * 生产状态小部件
 * 一个指定大小的平面，会平铺一层icon，这个平面将永远跟随摄像机
 */
export const iconWidget = (size: { width: number; height: number }) => {
  const { width, height } = size;
  const texture = new THREE.TextureLoader().load("/mode/electric.png");
  const geometry = new THREE.PlaneGeometry(width, height);
  const material = new THREE.MeshBasicMaterial({
    map: texture,
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.material.transparent = true;
  return cube;
};