vue3+threejs新手从零开发卡牌游戏(五):在scene场景中添加手牌区

首先为了方便,我们修改camera相机的位置,将它从正上方往下看,x和z轴值设为0即可

javascript 复制代码
camera.position.set( 0, 6.5, 0 );

此时刷新页面,看到的效果应该是这样的:

然后我想在最下方的一片区域创建手牌区、卡组区、生命值等信息,如下图红框中所示:

接下来我们一步步实现:

第一步 :首先在game目录下新建hand文件夹,里面的index.vue是入口文件,这里我设计的是将玩家1(player1)和玩家2(player2)手牌区分别建立,对应就是p1.vue和p2.vue,当然这个demo里的玩家2其实指的是电脑操控,而不是真的联网和别人对战。

这里我们先不考虑玩家2的手牌区,那么hand/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 P1 from "./p1.vue"
// import P2 from "./p2.vue"

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

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

const init = () => {
  p1Ref.value.init()
  // p2Ref.value.init()
}
</script>

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

之后在p1.vue中,我们通过new一个Group来代表手牌区,然后我们在手牌区渲染4张卡牌,这里我们写了一个测试卡组列表,里面保存的是各个卡牌对应的card_id,代码如下:

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

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { Card } from "@/views/game/Card.ts"
import { CARD_DICT } from "@/utils/dict/card.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']

// 手牌区group
const handGroup = new THREE.Group()
scene.add(handGroup)

// 测试卡组
const deckList = [
  "YZ-01",
  "YZ-02",
  "YZ-03",
  "YZ-04",
]

const init = () => {
  deckList.forEach((v: any, i: any) => {
    let obj = CARD_DICT.find((b: any) => b.card_id === v)
    if (obj) {
      let card = new Card(obj)
      let mesh = card.init()
      mesh.position.set(i*1, 0.02 * i, 0)
      // mesh.position.set(i*0.4, 0.02 * i, 0)
      handGroup.add( mesh );
    }
  })
}

defineExpose({
  init
})
</script>

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

刷新页面效果如下(之前在game/index.vue中测试用的renderCard方法可以删掉了):

我们看到手牌区已经添加进scene场景中了,现在我们需要把手牌区移动到左下角,这里我自己用的方式是:

1.先确定左下角的屏幕坐标(0, window.innerHeight)

2.将屏幕坐标转换成世界坐标

3.之后在scene中添加一个底层的地面PlaneGeometry,将世界坐标和相机传入光线投射Raycaster中,然后获取射线与地面的相交点,这个相交点的位置就是手牌区Group的位置,p1.vue完整代码如下:

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

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { Card } from "@/views/game/Card.ts"
import { CARD_DICT } from "@/utils/dict/card.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();

// 手牌区group
const handGroup = new THREE.Group()
scene.add(handGroup)

// 测试卡组
const deckList = [
  "YZ-01",
  "YZ-02",
  "YZ-03",
  "YZ-04",
]

const init = () => {
  addPlane()
  setHandPos()

  deckList.forEach((v: any, i: any) => {
    let obj = CARD_DICT.find((b: any) => b.card_id === v)
    if (obj) {
      let card = new Card(obj)
      let mesh = card.init()
      mesh.position.set(i * 1, 0.02 * i, 0)
      // mesh.position.set(i*0.4, 0.02 * i, 0)
      handGroup.add( mesh );
    }
  })

}

// 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 );
}

// 设置手牌区位置
const setHandPos = () => {
  nextTick(() => {
    let x = 0
    let y = window.innerHeight
    pointer.x = ( x / window.innerWidth ) * 2 - 1;
    pointer.y = - ( y / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera( pointer, camera );
    let plane = scene.getObjectByName("地面")
    const intersects = raycaster.intersectObject( plane );
    if (intersects.length > 0) {
      let point = intersects[0].point
      // 由于卡牌几何体大小设置的是(1, 0.02, 1.4),所以我们对应进行偏移
      handGroup.position.set(point.x, point.y, point.z)
      // handGroup.position.set(point.x + 0.5, point.y, point.z - 0.7)
    }
    console.log(55,intersects)
  })
}

defineExpose({
  init
})
</script>

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

刷新页面后效果如下:

我们看到手牌区Group已经移动到左下角了,但由于中心点问题,我们需要再进行偏移下:

javascript 复制代码
handGroup.position.set(point.x + 0.5, point.y, point.z - 0.7)

调整后效果如下:

相关推荐
new出一个对象19 分钟前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥1 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
天天进步20154 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html