devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3+threejs新手从零开发卡牌游戏（九）：添加抽卡逻辑和动效

作者：菜鸟追梦旅行 | 2024-03-23 10:48:59

赞

踩

vue3+threejs新手从零开发卡牌游戏（九）：添加抽卡逻辑和动效

首先优化下之前的代码，把game/deck/p1.vue中修改卡组方法和渲染卡组文字方法提到公共方法中，此时utils/common.ts完整代码如下：

  1.  
  2. import { nextTick } from 'vue';
  3. import * as THREE from 'three';
  4. import * as TWEEN from '@tweenjs/tween.js'
  5. import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
  6.  
  7. // 坐标归一化
  8. const transPos = (x: any, y: any) => {
  9.   let pointer = new THREE.Vector2()
  10.   
  11.   pointer.x = ( x / window.innerWidth ) * 2 - 1;
  12.   pointer.y = - ( y / window.innerHeight ) * 2 + 1;
  13.  
  14.   return pointer
  15. }
  16. export { transPos }
  17.  
  18. // 修改卡组
  19. const editDeckCard = (group:any, mesh: any, type: any) => {
  20.   return new Promise((resolve, reject) => {
  21.     let text = group.children.find((v: any) => v.name === "卡组数量")
  22.     let shadowText = group.children.find((v: any) => v.name === "卡组数量阴影")
  23.     // console.log(22, group.children, commonStore.$state.p1Deck)
  24.     if (type === "remove") { // 删除卡组中的卡牌
  25.       let child = group.children.find((v: any) => v.name === mesh.name)
  26.       if (child) {
  27.         group.remove(child)
  28.       }
  29.     }
  30.     group.remove(text)
  31.     group.remove(shadowText)
  32.     group.children.forEach((v: any, i: any) => {
  33.       v.position.set(0, 0.005 * i, 0)
  34.     })
  35.     resolve(true)
  36.   })
  37. }
  38. export { editDeckCard }
  39.  
  40. // 渲染卡组文字
  41. const renderText = (group: any, text: any, font: any, position: any) => {
  42.   return new Promise((resolve, reject) => {
  43.     const geometry = new TextGeometry( `${text}`, {
  44.       font,
  45.       size: 0.4,
  46.       height: 0,
  47.       curveSegments: 4,
  48.       bevelEnabled: true,
  49.       bevelThickness: 0,
  50.       bevelSize: 0,
  51.       bevelSegments: 0
  52.     });
  53.     geometry.center()
  54.     const material = new THREE.MeshBasicMaterial({ 
  55.       color: new THREE.Color("white"),
  56.       alphaHash: true
  57.     })
  58.     const mesh = new THREE.Mesh( geometry, material ) ;
  59.     mesh.position.set(position.x, position.y + 0.01, position.z)
  60.     // mesh.position.set(0, 0.005 * commonStore.$state.p1Deck.length + 0.01, 0)
  61.     mesh.rotateX(-90 * (Math.PI / 180)) // 弧度
  62.     mesh.name = "卡组数量"
  63.   
  64.     // 阴影
  65.     let shadowGeometry = geometry.clone()
  66.     shadowGeometry.translate(0.02, 0.02, 0);
  67.     let shadowMaterial = new THREE.MeshBasicMaterial({
  68.       color: new THREE.Color("black"),
  69.       alphaHash: true
  70.     });
  71.     let shadowMesh = new THREE.Mesh(shadowGeometry, shadowMaterial);
  72.     shadowMesh.position.set(position.x, position.y, position.z)
  73.     // shadowMesh.position.set(0, 0.005 * commonStore.$state.p1Deck.length, 0)
  74.     shadowMesh.rotateX(-90 * (Math.PI / 180)) // 弧度
  75.     shadowMesh.name = "卡组数量阴影"
  76.   
  77.     group.add(mesh)
  78.     group.add(shadowMesh)
  79.  
  80.     resolve(true)
  81.   })
  82. }
  83. export { renderText }

同步修改game/index.vue中对修改卡组方法的使用：

  1.  
  2. import { transPos, editDeckCard, renderText } from "@/utils/common.ts"
  3.  
  4. // 初始化手牌
  5. const initHand = () => {
  6.   let cardNumber = 4
  7.   let _number = 0
  8.   let p1Deck = JSON.parse(JSON.stringify(commonStore.$state.p1Deck))
  9.   let deckGroup = scene.getObjectByName("p1_deckGroup")
  10.   let position = new THREE.Vector3(0, 0.005 * p1Deck.length, 0)
  11.   let _interval = setInterval(async() => {
  12.     // console.log(123, p1Deck)
  13.     if (_number < cardNumber) {
  14.       let obj = p1Deck[p1Deck.length - 1]
  15.       p1Deck.splice(p1Deck.length-1, 1)
  16.       commonStore.updateP1Deck(p1Deck)
  17.       // 修改卡组
  18.       await editDeckCard(deckGroup, obj, "remove")
  19.       await renderText(deckGroup, `${commonStore.$state.p1Deck.length}`, commonStore.$state._font, position)
  20.       // 手牌区添加手牌
  21.       handRef.value.addHandCard(obj, deckGroup)
  22.     } else {
  23.       clearInterval(_interval)
  24.     }
  25.     _number++
  26.   }, 200)
  27.  
  28. }

之后我们思考下抽卡逻辑：
1.点击卡组，将卡组平移到页面中心位置（0, 0, 0）（y轴可以适当调高一点，这里点击事件只是为了测试抽卡，之后可以删掉）
2.然后卡组上展示“点击抽卡”的文字（文字用的是div+css的形式）

3.点击抽卡，执行抽卡动画

4.抽卡结束后，卡组移回到原位

首先我们在game/index.vue中添加点击事件，用raycaster射线进行鼠标拾取，当点击在卡组上时，执行onP1DeckEvent，这里由于是移动端所以只监听了touch事件，pc端则需要额外监听click事件：

  1. // 鼠标按下
  2. window.addEventListener('touchstart', onMousedown)
  3.  
  4. // 鼠标按下事件
  5. const onMousedown = (ev: any) => {
  6.   // console.log(222, ev.target)
  7.   // 判断是否点击到canvas上
  8.   if(!(ev.target instanceof HTMLCanvasElement)){
  9.     return;
  10.   }
  11.   // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  12.   let clientX = ev.clientX || ev.changedTouches[0].pageX
  13.   let clientY = ev.clientY || ev.changedTouches[0].pageY
  14.   // pointer.x = ( clientX / window.innerWidth ) * 2 - 1;
  15.   // pointer.y = - ( clientY / window.innerHeight ) * 2 + 1;
  16.  
  17.   let point = transPos(clientX, clientY) // 卡组起始位置的屏幕坐标
  18.  
  19.   // 通过摄像机和鼠标位置更新射线
  20.   raycaster.setFromCamera( point, camera );
  21.  
  22.   // 点击卡组事件
  23.   onP1DeckEvent()
  24. }
  25.  
  26. // 点击卡组事件
  27. const onP1DeckEvent = () => {
  28.   if (commonStore.$state.p1Deck.length <= 0) {
  29.     return
  30.   }
  31.   let p1_deckGroup = scene.getObjectByName("p1_deckGroup")
  32.   let arr = raycaster.intersectObject(p1_deckGroup, true)
  33.   if (arr.length <= 0) {
  34.     return
  35.   }
  36.   let pos1 = p1_deckGroup.userData.position
  37.   let pos2 = new THREE.Vector3(0, 2, 0)
  38.   // console.log(444, pos1, pos2)
  39.   if (p1_deckGroup.position.x !== pos2.x) {
  40.     drawCardRef.value.drawCardAnimate1(p1_deckGroup, pos1, pos2)
  41.   }
  42. }

然后我们在src下新建一个抽卡组件：

这个组件其实是用div+css画了一个透明的蒙层，卡组移到中央后，展示蒙层和“点击抽卡”字样，然后卡组动画我们分为两步，第一步是卡组飞到页面中心，用户点击抽卡后，执行之前的修改卡组和添加手牌方法，然后隐藏蒙层，执行第二步卡组移回原文动画，components/DrawCard.vue完整代码如下：

  1. <!-- 抽卡 -->
  2. <template>
  3.   <div v-if="state.visible" ref="maskRef" class="mask">
  4.     <div class="box" @click="onDrawCard">
  5.       <p>点击抽卡</p>
  6.     </div>
  7.   </div>
  8. </template>
  9.  
  10. <script setup lang="ts">
  11. import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
  12. import { useCommonStore } from "@/stores/common.ts"
  13. import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
  14. import { transPos, editDeckCard, renderText } from "@/utils/common.ts"
  15.  
  16. const props: any = defineProps({
  17.   handRef: {},
  18.   deckRef: {}
  19. })
  20.  
  21. // 引入threejs变量
  22. const {proxy} = getCurrentInstance()
  23. const THREE = proxy['THREE']
  24. const scene = proxy['scene']
  25. const camera = proxy['camera']
  26. const renderer = proxy['renderer']
  27. const TWEEN = proxy['TWEEN']
  28.  
  29. const commonStore = useCommonStore()
  30. const maskRef = ref()
  31.  
  32. const state = reactive({
  33.   visible: false
  34. })
  35.  
  36. // 卡组抽卡动画1-卡组移到页面中央
  37. const drawCardAnimate1 = (deckGroup: any, startPos: any, endPos: any) => {
  38.   // 隐藏卡组数量和卡组数量阴影几何体
  39.   let textMesh = deckGroup.children.find((v: any) => v.name === "卡组数量")
  40.   let textShadowMesh = deckGroup.children.find((v: any) => v.name === "卡组数量阴影")
  41.  
  42.   const tw = new TWEEN.Tween({
  43.     x: startPos.x,
  44.     y: startPos.y,
  45.     z: startPos.z,
  46.     opacity: 1.0,
  47.     group: deckGroup
  48.   })
  49.   tw.to({
  50.     x: endPos.x,
  51.     y: endPos.y,
  52.     z: endPos.z,
  53.     opacity: 0.0,
  54.   }, 200)
  55.   tw.easing(TWEEN.Easing.Quadratic.Out)
  56.   tw.onUpdate((obj: any) => {
  57.     obj.group.position.set(obj.x, obj.y, obj.z)
  58.     textMesh.material.opacity = obj.opacity
  59.     textShadowMesh.material.opacity = obj.opacity
  60.   })
  61.   tw.onComplete(function() {
  62.     state.visible = true
  63.     TWEEN.remove(tw)
  64.   })
  65.   tw.start();
  66. }
  67.  
  68. // 卡组抽卡动画2-卡组回到原位
  69. const drawCardAnimate2 = (deckGroup: any, startPos: any, endPos: any) => {
  70.   // 隐藏卡组数量和卡组数量阴影几何体
  71.   let textMesh = deckGroup.children.find((v: any) => v.name === "卡组数量")
  72.   let textShadowMesh = deckGroup.children.find((v: any) => v.name === "卡组数量阴影")
  73.   // textMesh.material.opacity = 1
  74.   // textShadowMesh.material.opacity = 1
  75.  
  76.   const tw = new TWEEN.Tween({
  77.     x: startPos.x,
  78.     y: startPos.y,
  79.     z: startPos.z,
  80.     opacity: 0,
  81.     group: deckGroup
  82.   })
  83.   tw.to({
  84.     x: endPos.x,
  85.     y: endPos.y,
  86.     z: endPos.z,
  87.     opacity: 1,
  88.   }, 200)
  89.   tw.easing(TWEEN.Easing.Quadratic.Out)
  90.   tw.onUpdate((obj: any) => {
  91.     obj.group.position.set(obj.x, obj.y, obj.z)
  92.     textMesh.material.opacity = obj.opacity
  93.     textShadowMesh.material.opacity = obj.opacity
  94.   })
  95.   tw.onComplete(function() {
  96.     TWEEN.remove(tw)
  97.   })
  98.   tw.start();
  99. }
  100.  
  101. // 抽卡
  102. const onDrawCard = async () => {
  103.   let p1_deckGroup = scene.getObjectByName("p1_deckGroup")
  104.   let p1Deck = JSON.parse(JSON.stringify(commonStore.$state.p1Deck))
  105.   let position = new THREE.Vector3(0, 0.005 * p1Deck.length, 0)
  106.  
  107.   let obj = p1Deck[p1Deck.length - 1]
  108.   p1Deck.splice(p1Deck.length-1, 1)
  109.   commonStore.updateP1Deck(p1Deck)
  110.   // 修改卡组
  111.   await editDeckCard(p1_deckGroup, obj, "remove")
  112.   await renderText(p1_deckGroup, `${commonStore.$state.p1Deck.length}`, commonStore.$state._font, position)
  113.   // 手牌区添加手牌
  114.   props.handRef.addHandCard(obj, p1_deckGroup)
  115.   state.visible = false
  116.   setTimeout(() => {
  117.     nextTick(() => {
  118.       drawCardAnimate2(p1_deckGroup, p1_deckGroup.position, p1_deckGroup.userData.position)
  119.     })
  120.   }, 500)
  121. }
  122.  
  123.  
  124. defineExpose({
  125.   drawCardAnimate1,
  126.   drawCardAnimate2
  127. })
  128. </script>
  129.  
  130. <style lang="scss" scoped>
  131. .mask {
  132.   position: fixed;
  133.   top: 0;
  134.   left: 0;
  135.   z-index: 10;
  136.   display: flex;
  137.   align-items: center;
  138.   justify-content: center;
  139.   width: 100%;
  140.   height: 100vh;
  141.   // background-color: white;
  142.   .box {
  143.     width: 50vh;
  144.     // height: 100px;
  145.     text-align: center;
  146.     font-size: 20px;
  147.     color: #fff;
  148.   }
  149. }
  150. </style>

注意：由于点击事件会穿透蒙层，所以我们在onMousedown方法中添加了ev.target instanceof HTMLCanvasElement进行判断是否点击到了canvas上。

最后还优化了下卡组，给卡组添加了线框，game/deck/p1.vue完整代码如下：

  1. <template>
  2.   <div></div>
  3. </template>
  4.  
  5. <script setup lang="ts">
  6. import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
  7. import { useCommonStore } from "@/stores/common.ts"
  8. import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
  9. import { Card } from "@/views/game/Card.ts"
  10. import { CARD_DICT } from "@/utils/dict/card.ts"
  11. import { transPos, renderText } from "@/utils/common.ts"
  12.  
  13. // 引入threejs变量
  14. const {proxy} = getCurrentInstance()
  15. const THREE = proxy['THREE']
  16. const scene = proxy['scene']
  17. const camera = proxy['camera']
  18. const renderer = proxy['renderer']
  19. const TWEEN = proxy['TWEEN']
  20.  
  21. const raycaster = new THREE.Raycaster();
  22. const pointer = new THREE.Vector2();
  23.  
  24. const commonStore = useCommonStore()
  25.  
  26. // 卡组group
  27. const deckGroup = new THREE.Group()
  28. deckGroup.name = "p1_deckGroup"
  29. scene.add(deckGroup)
  30.  
  31. const init = () => {
  32.   setDeckPos()
  33.   addDeckWireframe()
  34.   commonStore.$state.p1Deck.forEach((v: any, i: any) => {
  35.     let obj = CARD_DICT.find((b: any) => b.card_id === v.card_id)
  36.     if (obj) {
  37.       let card = new Card(obj)
  38.       let mesh = card.init()
  39.       mesh.position.set(0, 0.005 * i, 0)
  40.       mesh.rotateX(180 * (Math.PI / 180)) // 弧度
  41.       mesh.name = v.name
  42.       deckGroup.add( mesh );
  43.     }
  44.   })
  45.  
  46.   let position = new THREE.Vector3(0, 0.005 * commonStore.$state.p1Deck.length, 0)
  47.   renderText(deckGroup, `${commonStore.$state.p1Deck.length}`, commonStore.$state._font, position)
  48.  
  49. }
  50.  
  51. // 设置卡组位置
  52. const setDeckPos = () => {
  53.   nextTick(() => {
  54.     let plane = scene.getObjectByName("地面")
  55.     let point = transPos(window.innerWidth - 15, window.innerHeight - 15) // 卡组起始位置的屏幕坐标
  56.     // 
  57.     raycaster.setFromCamera( point, camera );
  58.     const intersects1 = raycaster.intersectObject( plane );
  59.     if (intersects1.length > 0) {
  60.       let point = intersects1[0].point
  61.       // deckGroup.position.set(point.x, point.y, point.z)
  62.       deckGroup.position.set(point.x - 0.5, point.y, point.z - 0.7)
  63.       // 记录卡组位置
  64.       let position = new THREE.Vector3(point.x - 0.5, point.y, point.z - 0.7)
  65.       deckGroup.userData["position"] = position
  66.     }
  67.   })
  68. }
  69.  
  70. // 绘制卡组区域线框
  71. const addDeckWireframe = () => {
  72.   nextTick(() => {
  73.     const edges = new THREE.EdgesGeometry( deckGroup.children[0].geometry );
  74.     const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
  75.     deckGroup.add(line);
  76.   })
  77. }
  78.  
  79. defineExpose({
  80.   init,
  81. })
  82. </script>
  83.  
  84. <style lang="scss" scoped>
  85. </style>

最后看下抽卡效果：

至此基本完成了抽卡逻辑和简单动效的开发。

附录：

game/index.vue完整代码如下：

  1. <template>
  2.   <div ref="sceneRef" class="scene"></div>
  3.   <!-- 手牌 -->
  4.   <Hand ref="handRef"/>
  5.   <!-- 卡组 -->
  6.   <Deck ref="deckRef"/>
  7.   <!-- 抽卡逻辑 -->
  8.   <DrawCard ref="drawCardRef" :handRef="handRef" :deckRef="deckRef"/>
  9. </template>
  10.  
  11. <script setup lang="ts">
  12. import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
  13. import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 轨道控制器
  14. import { FontLoader } from 'three/addons/loaders/FontLoader.js';
  15. import { useCommonStore } from "@/stores/common.ts"
  16. import { transPos, editDeckCard, renderText } from "@/utils/common.ts"
  17. import { Card } from "./Card.ts"
  18. import { CARD_DICT } from "@/utils/dict/card.ts"
  19. import Hand from "./hand/index.vue"
  20. import Deck from "./deck/index.vue"
  21. import DrawCard from "@/components/DrawCard.vue"
  22.  
  23. // 引入threejs变量
  24. const {proxy} = getCurrentInstance()
  25. const THREE = proxy['THREE']
  26. const scene = proxy['scene']
  27. const camera = proxy['camera']
  28. const renderer = proxy['renderer']
  29. const TWEEN = proxy['TWEEN']
  30.  
  31. const raycaster = new THREE.Raycaster();
  32. const pointer = new THREE.Vector2();
  33.  
  34. const commonStore = useCommonStore()
  35.  
  36. // 场景ref
  37. const sceneRef = ref()
  38. const handRef = ref()
  39. const deckRef = ref()
  40. const drawCardRef = ref()
  41.  
  42. // 坐标轴辅助
  43. const axesHelper = new THREE.AxesHelper(5);
  44. // 创建轨道控制器
  45. // const controls = new OrbitControls( camera, renderer.domElement );
  46. // 字体加载器
  47. const fontLoader = new FontLoader();
  48.  
  49. onMounted(async () => {
  50.   await initResource()
  51.   initScene()
  52.   initGame()
  53.  
  54.   // 鼠标按下
  55.   window.addEventListener('touchstart', onMousedown)
  56.   // window.addEventListener('click', onMousedown)
  57.  
  58.   // 监听浏览器窗口变化进行场景自适应
  59.   window.addEventListener('resize', onWindowResize, false);
  60. })
  61.  
  62. // 资源加载
  63. const initResource = () => {
  64.   // 字体加载
  65.   return new Promise((resolve, reject) => {
  66.     fontLoader.load('fonts/helvetiker_regular.typeface.json', (font: any) => {
  67.       commonStore.loadFont(font)
  68.       resolve(true)
  69.     });
  70.   })
  71. }
  72.  
  73. // 初始化场景
  74. const initScene = () => {
  75.   renderer.setSize( window.innerWidth, window.innerHeight );
  76.   sceneRef.value.appendChild( renderer.domElement );
  77.   scene.add(axesHelper)
  78.  
  79.   // camera.position.set( 5, 5, 5 );
  80.   camera.position.set( 0, 6.5, 0 );
  81.   camera.lookAt(0, 0, 0)
  82.  
  83.   addPlane()
  84.  
  85.   animate();
  86. }
  87.  
  88. // scene中添加plane几何体
  89. const addPlane = () => {
  90.   const geometry = new THREE.PlaneGeometry( 20, 20);
  91.   const material = new THREE.MeshBasicMaterial( {
  92.     color: new THREE.Color("gray"), 
  93.     side: THREE.FrontSide, 
  94.     alphaHash: true,
  95.     // alphaTest: 0,
  96.     opacity: 0
  97.   } );
  98.   const plane = new THREE.Mesh( geometry, material );
  99.   plane.rotateX(-90 * (Math.PI / 180)) // 弧度
  100.   plane.name = "地面"
  101.   scene.add( plane );
  102. }
  103.  
  104. // 用requestAnimationFrame进行渲染循环
  105. const animate = () => {
  106.   requestAnimationFrame( animate );
  107.   TWEEN.update()
  108.   renderer.render( scene, camera );
  109. }
  110.  
  111. // 场景跟随浏览器窗口大小自适应
  112. const onWindowResize = () => {
  113.   camera.aspect = window.innerWidth / window.innerHeight;
  114.   camera.updateProjectionMatrix();
  115.   renderer.setSize(window.innerWidth, window.innerHeight);
  116. }
  117.  
  118. // 初始化游戏
  119. const initGame = async () => {
  120.   // 初始化卡组
  121.   await initDeck()
  122.   // 初始化手牌
  123.   initHand()
  124. }
  125.  
  126. // 初始化卡组
  127. const initDeck = () => {
  128.   return new Promise((resolve, reject) => {
  129.     let p1Deck = [
  130.       "YZ-01",
  131.       "YZ-02",
  132.       "YZ-03",
  133.       "YZ-04",
  134.       "YZ-01",
  135.       "YZ-02",
  136.       // "YZ-03",
  137.       // "YZ-04",
  138.       // "YZ-01",
  139.       // "YZ-02",
  140.       // "YZ-03",
  141.       // "YZ-04",
  142.     ]
  143.     // 洗牌
  144.     p1Deck.sort(() => {
  145.       return Math.random() - 0.5
  146.     })
  147.     let newDeck: any = []
  148.     p1Deck.forEach((v: any, i: any) => {
  149.       let obj = CARD_DICT.find((b: any) => b.card_id === v)
  150.       if (obj) {
  151.         newDeck.push({
  152.           card_id: v,
  153.           name: `${obj.name}_${i}`
  154.         })
  155.       }
  156.     })
  157.     // console.log("p1Deck", newDeck)
  158.     commonStore.updateP1Deck(newDeck)
  159.     
  160.     nextTick(() => {
  161.       handRef.value.init()
  162.       deckRef.value.init()
  163.       resolve(true)
  164.     })
  165.   })
  166. }
  167.  
  168. // 初始化手牌
  169. const initHand = () => {
  170.   let cardNumber = 4
  171.   let _number = 0
  172.   let p1Deck = JSON.parse(JSON.stringify(commonStore.$state.p1Deck))
  173.   let deckGroup = scene.getObjectByName("p1_deckGroup")
  174.   let position = new THREE.Vector3(0, 0.005 * p1Deck.length, 0)
  175.   let _interval = setInterval(async() => {
  176.     // console.log(123, p1Deck)
  177.     if (_number < cardNumber) {
  178.       let obj = p1Deck[p1Deck.length - 1]
  179.       p1Deck.splice(p1Deck.length-1, 1)
  180.       commonStore.updateP1Deck(p1Deck)
  181.       // 修改卡组
  182.       await editDeckCard(deckGroup, obj, "remove")
  183.       await renderText(deckGroup, `${commonStore.$state.p1Deck.length}`, commonStore.$state._font, position)
  184.       // 手牌区添加手牌
  185.       handRef.value.addHandCard(obj, deckGroup)
  186.     } else {
  187.       clearInterval(_interval)
  188.     }
  189.     _number++
  190.   }, 200)
  191.  
  192. }
  193.  
  194. // 鼠标按下事件
  195. const onMousedown = (ev: any) => {
  196.   // console.log(222, ev.target)
  197.   // 判断是否点击到canvas上
  198.   if(!(ev.target instanceof HTMLCanvasElement)){
  199.     return;
  200.   }
  201.   // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  202.   let clientX = ev.clientX || ev.changedTouches[0].pageX
  203.   let clientY = ev.clientY || ev.changedTouches[0].pageY
  204.   // pointer.x = ( clientX / window.innerWidth ) * 2 - 1;
  205.   // pointer.y = - ( clientY / window.innerHeight ) * 2 + 1;
  206.  
  207.   let point = transPos(clientX, clientY) // 卡组起始位置的屏幕坐标
  208.  
  209.   // 通过摄像机和鼠标位置更新射线
  210.   raycaster.setFromCamera( point, camera );
  211.  
  212.   // 点击卡组事件
  213.   onP1DeckEvent()
  214. }
  215.  
  216. // 点击卡组事件
  217. const onP1DeckEvent = () => {
  218.   if (commonStore.$state.p1Deck.length <= 0) {
  219.     return
  220.   }
  221.   let p1_deckGroup = scene.getObjectByName("p1_deckGroup")
  222.   let arr = raycaster.intersectObject(p1_deckGroup, true)
  223.   if (arr.length <= 0) {
  224.     return
  225.   }
  226.   let pos1 = p1_deckGroup.userData.position
  227.   let pos2 = new THREE.Vector3(0, 2, 0)
  228.   // console.log(444, pos1, pos2)
  229.   if (p1_deckGroup.position.x !== pos2.x) {
  230.     drawCardRef.value.drawCardAnimate1(p1_deckGroup, pos1, pos2)
  231.   }
  232. }
  233. </script>
  234.  
  235. <style lang="scss" scoped>
  236. .scene {
  237.   position: fixed;
  238.   top: 0;
  239.   left: 0;
  240.   width: 100%;
  241.   height: 100vh;
  242. }
  243. </style>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号