vue3+threejs新手从零开发卡牌游戏（十）：创建己方战域

清岚_lxn2024-03-23 12:43

首先在game目录下创建site文件夹，用来存放战域相关代码：

这里思考下如何创建战域，我的想法是添加一个平面，将己方战域和对方战域都添加进这个平面中，所以首先我们先添加一个战域plane，site/index.vue代码如下：

javascript 复制代码 
<!-- 场地 -->
<template>
  <P1 ref="p1Ref"/>
  <!-- <P2 ref="p2Ref"/> -->
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { transPos } from "@/utils/common.ts"
import P1 from "./p1.vue"
// import P2 from "./p2.vue"

// 引入threejs变量
const {proxy} = getCurrentInstance()
const THREE = proxy['THREE']
const scene = proxy['scene']
const camera = proxy['camera']
const renderer = proxy['renderer']
const TWEEN = proxy['TWEEN']

const raycaster = new THREE.Raycaster();

const p1Ref = ref()
// const p2Ref = ref()

onMounted(() => {
  // init()
})

const init = async () => {
  await addSitePlane()
  // setSite()
  p1Ref.value.init()
  // p2Ref.value.init()
}

// 添加战域plane
const addSitePlane = () => {
  return new Promise((resolve, reject) => {
    // 设置战域大小和位置
    let plane = scene.getObjectByName("地面")
    let point = transPos(0, 0) // 战域起始位置的屏幕坐标
    // 
    raycaster.setFromCamera( point, camera );
    const intersects = raycaster.intersectObject( plane );
    if (intersects.length > 0) {
      let point = intersects[0].point
      // 进行裁剪
      // let x = Math.abs(point.x) * 2 - 2.4
      // let y = Math.abs(point.z) * 2 - 4
      let x = Math.abs(point.x) * 2
      let y = Math.abs(point.z) * 2

      const geometry = new THREE.PlaneGeometry( x, y );
      geometry.center()
      const material = new THREE.MeshBasicMaterial({
        color: new THREE.Color("gray"),
        side: THREE.FrontSide, 
        alphaHash: true,
        // alphaTest: 0,
        opacity: 0
      });
      const site = new THREE.Mesh( geometry, material );
      site.name = "战域"
      site.rotateX(-90 * (Math.PI / 180)) // 弧度
      site.userData["width"] = x
      site.userData["height"] = y
      scene.add(site)
      resolve(true)
    }
  })
}


defineExpose({
  init,
})
</script>

<style lang="scss" scoped>
</style>

这里计算出了平面的长和宽，将长宽数据存放进site的userData中，这个长和宽可以用来帮助我们后续绘制格子的时候做位置计算。然后我们在site/p1.vue中开始绘制己方战域：

1.绘制一个线框格子，格子Box的大小和卡牌设置成一样，如果在屏幕中看着比较大也可以通过scale进行适当的缩放：

javascript 复制代码 
// 创建线框网格
const createWireframe = () => {
  
  const geometry = new THREE.BoxGeometry( 1, 0, 1.4 );
  const edges = new THREE.EdgesGeometry( geometry );
  const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
  line.rotateX(-90 * (Math.PI / 180)) // 弧度
  line.scale.set(0.8, 0.8, 0.8) // 缩放

  return line
}

2.我们可以按照自己的想法绘制游戏中有几个格子，这里我设计的是前5个格子（包括一个场地格子和一个墓地格子），后三个格子，site/p1.vue相关代码如下：

javascript 复制代码 
// 初始化己方战域
const init = () => {
  let sitePlane = scene.getObjectByName("战域")
  let planeWidth = sitePlane.userData.width
  let spaceX = (planeWidth - 5) / 4 // 设计一行有5个格子
  // console.log(123, spaceX)
  for (let i=0; i<5; i++) {
    let mesh = createWireframe()
    if (i == 0) {
      mesh.name = "场地"
    } else if (i == 1) {
      mesh.name = "己方场地1"
    } else if (i == 2) {
      mesh.name = "己方场地2"
    } else if (i == 3) {
      mesh.name = "己方场地3"
    } else if (i == 4) {
      mesh.name = "墓地"
    }
    if (i == 0 || i == 4) {
      mesh.position.set(-planeWidth/2 + 0.5, -0.65, 0)
    } else {
      mesh.position.set(-planeWidth/2 + 0.5, -0.7, 0)
    }
    mesh.translateX(spaceX * i + i)
    sitePlane.add(mesh)
  }
  for (let i=0; i<5; i++) {
    if (i > 0 && i < 4) {
      let mesh = createWireframe()
      if (i == 1) {
        mesh.name = "己方场地4"
      } else if (i == 2) {
        mesh.name = "己方场地5"
      } else if (i == 3) {
        mesh.name = "己方场地6"
      }
      mesh.position.set(-planeWidth/2 + 0.5, -2.2, 0)
      mesh.translateX(spaceX * i + i)
      sitePlane.add(mesh)
    }
  }
}

这里我为每个格子添加了name，方便后续卡牌上场，进墓等操作逻辑。

页面效果如下：

附录：

game/index.vue完整代码：

javascript 复制代码 
<template>
  <div ref="sceneRef" class="scene"></div>
  <!-- 手牌 -->
  <Hand ref="handRef"/>
  <!-- 卡组 -->
  <Deck ref="deckRef"/>
  <!-- 战域 -->
  <Site ref="siteRef"/>
  <!-- 抽卡逻辑 -->
  <DrawCard ref="drawCardRef" :handRef="handRef"/>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 轨道控制器
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { useCommonStore } from "@/stores/common.ts"
import { transPos, editDeckCard, renderText } from "@/utils/common.ts"
import { Card } from "./Card.ts"
import { CARD_DICT } from "@/utils/dict/card.ts"
import Hand from "./hand/index.vue"
import Deck from "./deck/index.vue"
import Site from "./site/index.vue"
import DrawCard from "@/components/DrawCard.vue"

// 引入threejs变量
const {proxy} = getCurrentInstance()
const THREE = proxy['THREE']
const scene = proxy['scene']
const camera = proxy['camera']
const renderer = proxy['renderer']
const TWEEN = proxy['TWEEN']

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

const commonStore = useCommonStore()

// 场景ref
const sceneRef = ref()
const siteRef = ref()
const handRef = ref()
const deckRef = ref()
const drawCardRef = ref()

// 坐标轴辅助
const axesHelper = new THREE.AxesHelper(5);
// 创建轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
// 字体加载器
const fontLoader = new FontLoader();

onMounted(async () => {
  await initResource()
  initScene()
  initGame()

  // 鼠标按下
  window.addEventListener('touchstart', onMousedown)
  // window.addEventListener('click', onMousedown)

  // 监听浏览器窗口变化进行场景自适应
  window.addEventListener('resize', onWindowResize, false);
})

// 资源加载
const initResource = () => {
  // 字体加载
  return new Promise((resolve, reject) => {
    fontLoader.load('fonts/helvetiker_regular.typeface.json', (font: any) => {
      commonStore.loadFont(font)
      resolve(true)
    });
  })
}

// 初始化场景
const initScene = () => {
  renderer.setSize( window.innerWidth, window.innerHeight );
  sceneRef.value.appendChild( renderer.domElement );
  scene.add(axesHelper)

  // camera.position.set( 5, 5, 5 );
  camera.position.set( 0, 6.5, 0 );
  camera.lookAt(0, 0, 0)

  addPlane()

  animate();
}

// scene中添加plane几何体
const addPlane = () => {
  const geometry = new THREE.PlaneGeometry( 20, 20);
  const material = new THREE.MeshBasicMaterial( {
    color: new THREE.Color("gray"), 
    side: THREE.FrontSide, 
    alphaHash: true,
    // alphaTest: 0,
    opacity: 0
  } );
  const plane = new THREE.Mesh( geometry, material );
  plane.rotateX(-90 * (Math.PI / 180)) // 弧度
  plane.name = "地面"
  scene.add( plane );
}

// 用requestAnimationFrame进行渲染循环
const animate = () => {
  requestAnimationFrame( animate );
  TWEEN.update()
  renderer.render( scene, camera );
}

// 场景跟随浏览器窗口大小自适应
const onWindowResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

// 初始化游戏
const initGame = async () => {
  // 初始化场地
  initSite()
  // 初始化卡组
  await initDeck()
  // 初始化手牌
  initHand()
}

// 初始化场地
const initSite = () => {
  siteRef.value.init()
}

// 初始化卡组
const initDeck = () => {
  return new Promise((resolve, reject) => {
    let p1Deck = [
      "YZ-01",
      "YZ-02",
      "YZ-03",
      "YZ-04",
      "YZ-01",
      "YZ-02",
      // "YZ-03",
      // "YZ-04",
      // "YZ-01",
      // "YZ-02",
      // "YZ-03",
      // "YZ-04",
    ]
    // 洗牌
    p1Deck.sort(() => {
      return Math.random() - 0.5
    })
    let newDeck: any = []
    p1Deck.forEach((v: any, i: any) => {
      let obj = CARD_DICT.find((b: any) => b.card_id === v)
      if (obj) {
        newDeck.push({
          card_id: v,
          name: `${obj.name}_${i}`
        })
      }
    })
    // console.log("p1Deck", newDeck)
    commonStore.updateP1Deck(newDeck)
    
    nextTick(() => {
      handRef.value.init()
      deckRef.value.init()
      resolve(true)
    })
  })
}

// 初始化手牌
const initHand = () => {
  let cardNumber = 4
  let _number = 0
  let p1Deck = JSON.parse(JSON.stringify(commonStore.$state.p1Deck))
  let deckGroup = scene.getObjectByName("p1_deckGroup")
  let position = new THREE.Vector3(0, 0.005 * p1Deck.length, 0)
  let _interval = setInterval(async() => {
    // console.log(123, p1Deck)
    if (_number < cardNumber) {
      let obj = p1Deck[p1Deck.length - 1]
      p1Deck.splice(p1Deck.length-1, 1)
      commonStore.updateP1Deck(p1Deck)
      // 修改卡组
      await editDeckCard(deckGroup, obj, "remove")
      await renderText(deckGroup, `${commonStore.$state.p1Deck.length}`, commonStore.$state._font, position)
      // 手牌区添加手牌
      handRef.value.addHandCard(obj, deckGroup)
    } else {
      clearInterval(_interval)
    }
    _number++
  }, 200)

}

// 鼠标按下事件
const onMousedown = (ev: any) => {
  // console.log(222, ev.target)
  // 判断是否点击到canvas上
  if(!(ev.target instanceof HTMLCanvasElement)){
    return;
  }
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  let clientX = ev.clientX || ev.changedTouches[0].pageX
  let clientY = ev.clientY || ev.changedTouches[0].pageY
  // pointer.x = ( clientX / window.innerWidth ) * 2 - 1;
  // pointer.y = - ( clientY / window.innerHeight ) * 2 + 1;

  let point = transPos(clientX, clientY) // 卡组起始位置的屏幕坐标

  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera( point, camera );

  // 点击卡组事件
  onP1DeckEvent()
}

// 点击卡组事件
const onP1DeckEvent = () => {
  if (commonStore.$state.p1Deck.length <= 0) {
    return
  }
  let p1_deckGroup = scene.getObjectByName("p1_deckGroup")
  let arr = raycaster.intersectObject(p1_deckGroup, true)
  if (arr.length <= 0) {
    return
  }
  let pos1 = p1_deckGroup.userData.position
  let pos2 = new THREE.Vector3(0, 2, 0)
  // console.log(444, pos1, pos2)
  if (p1_deckGroup.position.x !== pos2.x) {
    drawCardRef.value.drawCardAnimate1(p1_deckGroup, pos1, pos2)
  }
}
</script>

<style lang="scss" scoped>
.scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
</style>

site/p1.vue完整代码：

javascript 复制代码 
<template>
  <div></div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { useCommonStore } from "@/stores/common.ts"
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import { Card } from "@/views/game/Card.ts"
import { CARD_DICT } from "@/utils/dict/card.ts"
import { transPos, renderText } from "@/utils/common.ts"

// 引入threejs变量
const {proxy} = getCurrentInstance()
const THREE = proxy['THREE']
const scene = proxy['scene']
const camera = proxy['camera']
const renderer = proxy['renderer']
const TWEEN = proxy['TWEEN']

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

const commonStore = useCommonStore()

// 初始化己方战域
const init = () => {
  let sitePlane = scene.getObjectByName("战域")
  let planeWidth = sitePlane.userData.width
  let spaceX = (planeWidth - 5) / 4 // 设计一行有5个格子
  // console.log(123, spaceX)
  for (let i=0; i<5; i++) {
    let mesh = createWireframe()
    if (i == 0) {
      mesh.name = "场地"
    } else if (i == 1) {
      mesh.name = "己方场地1"
    } else if (i == 2) {
      mesh.name = "己方场地2"
    } else if (i == 3) {
      mesh.name = "己方场地3"
    } else if (i == 4) {
      mesh.name = "墓地"
    }
    if (i == 0 || i == 4) {
      mesh.position.set(-planeWidth/2 + 0.5, -0.65, 0)
    } else {
      mesh.position.set(-planeWidth/2 + 0.5, -0.7, 0)
    }
    mesh.translateX(spaceX * i + i)
    sitePlane.add(mesh)
  }
  for (let i=0; i<5; i++) {
    if (i > 0 && i < 4) {
      let mesh = createWireframe()
      if (i == 1) {
        mesh.name = "己方场地4"
      } else if (i == 2) {
        mesh.name = "己方场地5"
      } else if (i == 3) {
        mesh.name = "己方场地6"
      }
      mesh.position.set(-planeWidth/2 + 0.5, -2.2, 0)
      mesh.translateX(spaceX * i + i)
      sitePlane.add(mesh)
    }
  }
}

// 创建线框网格
const createWireframe = () => {
  
  const geometry = new THREE.BoxGeometry( 1, 0, 1.4 );
  const edges = new THREE.EdgesGeometry( geometry );
  const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
  line.rotateX(-90 * (Math.PI / 180)) // 弧度
  line.scale.set(0.8, 0.8, 0.8) // 缩放

  return line
}


defineExpose({
  init,
})
</script>

<style lang="scss" scoped>
</style>
相关推荐
向前看-3 分钟前
验证码机制
前端·后端
燃先生._.1 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖2 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235242 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240253 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar3 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人4 小时前
前端知识补充—CSS
前端·css
GISer_Jing4 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245524 小时前
吉利前端、AI面试
前端·面试·职场和发展
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程