vue3+threejs新手从零开发卡牌游戏（三）：尝试在场景中绘制一张卡牌

首先我们思考下，一张最简单的卡牌有哪些东西构成：卡牌样式和卡牌数据。一张卡牌有正面和背面，有名称、属性、种族、攻击力等数据，我们先不考虑数据，先尝试在场景中绘制一张卡牌出来。

一、寻找卡牌素材

为了简单我直接去游戏王决斗链接官网上面找的卡牌素材，然后百度图片游戏王卡背，拿到卡背的素材（注：所有threejs相关的素材建议全放在public目录下），目录结构如下所示：

卡面：（无敌的）青眼白龙

卡背：

back目录下存放的是卡背图片，card目录下存放的是卡牌的正面

二、在场景中绘制几何体

这里我选择的是Box几何体，方便处理正面和背面不同的素材

根据threejs官方代码示例，我们在initScene方法中添加renderCard方法：

// 初始化场景
const initScene = () => {
  ...

  renderCard()
}
// 创建卡牌
const renderCard = () => {
  const geometry = new THREE.BoxGeometry( 1, 0.02, 1.4 ); 
  const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
  const cube = new THREE.Mesh( geometry, material ); 
  scene.add( cube );
}

刷新页面展示如下：

一个绿色的几何体就出现在了场景里

三、使用TextureLoader加载素材图片

在threejs文档中找到TextureLoader的使用示例：

由于我们使用的是Box几何体，他本身有6个面，所以我们可以通过分别设置六个面的材质来渲染不同的图案（注：3和4两个面对应的是我们卡牌的正面和背面，其他几个面可以随便设置个颜色即可）我们修改下renderCard代码：

// 创建卡牌
const renderCard = () => {
  const geometry = new THREE.BoxGeometry( 1, 0.02, 1.4 ); 
  // const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
  let materials = []
  // 卡牌正面
  const frontTexture = new THREE.TextureLoader().load("textures/card/YZ-01.png");
  // 卡牌背面
  const backTexture = new THREE.TextureLoader().load("textures/back/01.jpeg");

  const m1 = new THREE.MeshBasicMaterial({
    color: new THREE.Color("gray")
  });
  materials.push(m1)

  const m2 = new THREE.MeshBasicMaterial({
    color: new THREE.Color("gray")
  });
  materials.push(m2)

  const m3 = new THREE.MeshBasicMaterial({
    map: frontTexture
  });
  materials.push(m3)

  const m4 = new THREE.MeshBasicMaterial({
    map: backTexture
  });
  materials.push(m4)

  const m5 = new THREE.MeshBasicMaterial({
    color: new THREE.Color("gray")
  });
  materials.push(m5)

  const m6 = new THREE.MeshBasicMaterial({
    color: new THREE.Color("gray")
  });
  materials.push(m6)

  const cube = new THREE.Mesh( geometry, materials ); 
  scene.add( cube );
}

四、刷新页面后效果如下：

旋转后可以看到背面

至此，我们成功在场景中绘制了一张卡牌。