vue3+threejs新手从零开发卡牌游戏（六）：手牌区卡牌添加叠放逻辑和拖曳事件

当手牌过多时，我们可以考虑将卡牌进行叠放，这样就不会超出之前设计好的手牌区长度了。

思路如下：

1.获取手牌区的长度

2.根据长度和卡牌数量实时计算叠放位置

上一节中，其实已经拿到了手牌区的起始点位置，那么我们再按同样方法拿到结束点位置，就可以计算出手牌区的长度了，我们修改hand/p1.vue代码：

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

// 设置手牌区位置
const setHandPos = () => {
  nextTick(() => {
    let plane = scene.getObjectByName("地面")
    let point1 = transPos(0, window.innerHeight) // 手牌区起始位置的屏幕坐标
    let point2 = transPos(window.innerWidth * 0.65, window.innerHeight) // 手牌区结束位置的屏幕坐标
    let x1 = 0 // 手牌区起始位置的世界x坐标
    let x2 = 0 // 手牌区结束位置的世界x坐标
    // 
    raycaster.setFromCamera( point1, camera );
    const intersects1 = raycaster.intersectObject( plane );
    if (intersects1.length > 0) {
      let point = intersects1[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)
      x1 = handGroup.position.x
    }
    // 
    raycaster.setFromCamera( point2, camera );
    const intersects = raycaster.intersectObject( plane );
    if (intersects.length > 0) {
      let point = intersects[0].point
      x2 = point.x + 0.5
    }

    // 用绝对值相加得到手牌区长度
    let _width = Math.abs(x1) + Math.abs(x2)
    
    // 计算叠放间距
    let space = (_width - 1) / (deckList.length - 1)
    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 * space, 0.02 * i, 0)
        handGroup.add( mesh );
      }
    })
  })
}

// 坐标归一化
const transPos = (x: any, y: any) => {
  let pointer = new THREE.Vector2()
  
  pointer.x = ( x / window.innerWidth ) * 2 - 1;
  pointer.y = - ( y / window.innerHeight ) * 2 + 1;

  return pointer
}

刷新页面效果如下：

我们看到已经有叠放效果了，修改下测试卡组添加更多的卡牌，效果如下：

这里还有一个问题，如果卡牌过少的话间距会很大：

所以再修改下space的计算逻辑，限制最大间距为1（这里卡牌几何体的宽度是1）：

let space = ((_width - 1) / (deckList.length - 1)) <= 1 ? (_width - 1) / (deckList.length - 1) : 1

调整后展示如下：

之后我们为手牌区里的卡牌添加拖曳事件，threejs里有一个拖放控制器（DragControls），我们直接用它，修改p1.vue代码：

引入DragControls：

import { DragControls } from 'three/addons/controls/DragControls.js';

指定手牌区为拖曳数组：

const controls = new DragControls( handGroup.children, camera, renderer.domElement );

监听拖曳事件，这里变化了拖曳卡牌的y轴位置，可以达到一个点击卡牌层级突出的一个效果：

controls.addEventListener( 'dragstart', function ( event: any ) {
  event.object.position.y += 0.04

} );

controls.addEventListener( 'drag', function ( event: any ) {
  event.object.position.y += 0.04
  console.log(event)

} );

controls.addEventListener( 'dragend', function ( event: any ) {
  event.object.position.y -= 0.04
} );

效果如下：

至此我们基本完成了手牌区的功能开发

p1.vue完整代码如下：

<template>
  <div></div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { DragControls } from 'three/addons/controls/DragControls.js';
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()
handGroup.name = "p1_handGroup"
scene.add(handGroup)

const controls = new DragControls( handGroup.children, camera, renderer.domElement );

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

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

// 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 plane = scene.getObjectByName("地面")
    let point1 = transPos(0, window.innerHeight) // 手牌区起始位置的屏幕坐标
    let point2 = transPos(window.innerWidth * 0.65, window.innerHeight) // 手牌区结束位置的屏幕坐标
    let x1 = 0 // 手牌区起始位置的世界x坐标
    let x2 = 0 // 手牌区结束位置的世界x坐标
    // 
    raycaster.setFromCamera( point1, camera );
    const intersects1 = raycaster.intersectObject( plane );
    if (intersects1.length > 0) {
      let point = intersects1[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)
      x1 = handGroup.position.x
    }
    // 
    raycaster.setFromCamera( point2, camera );
    const intersects = raycaster.intersectObject( plane );
    if (intersects.length > 0) {
      let point = intersects[0].point
      x2 = point.x + 0.5
    }

    // 用绝对值相加得到手牌区长度
    let _width = Math.abs(x1) + Math.abs(x2)
    
    // 计算叠放间距
    let space = ((_width - 1) / (deckList.length - 1)) <= 1 ? (_width - 1) / (deckList.length - 1) : 1
    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 * space, 0.02 * i, 0)
        handGroup.add( mesh );
      }
    })
  })
}

// 坐标归一化
const transPos = (x: any, y: any) => {
  let pointer = new THREE.Vector2()
  
  pointer.x = ( x / window.innerWidth ) * 2 - 1;
  pointer.y = - ( y / window.innerHeight ) * 2 + 1;

  return pointer
}

controls.addEventListener( 'dragstart', function ( event: any ) {
  event.object.position.y += 0.04

} );

controls.addEventListener( 'drag', function ( event: any ) {
  event.object.position.y += 0.04
  console.log(event)

} );

controls.addEventListener( 'dragend', function ( event: any ) {
  event.object.position.y -= 0.04
} );

defineExpose({
  init
})
</script>

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