vue3+threejs新手从零开发卡牌游戏（七）：创建卡组

news2025/11/4 23:55:03

在开始前先优化下之前的代码：

在之前hand/p1.vue中为了定位

utils文件夹下新建common.ts，将一些公用方法提取出来放在这里：


在game/Cards.ts中，我们调整下卡牌的厚度，由原来的0.02改为0.005，原因是之前的太厚了，其他涉及的地方需要同步修改：

const geometry = new THREE.BoxGeometry( 1, 0.005, 1.4 );

在game/hand/p1.vue中，同步调整手牌区卡牌的叠放高度和手牌区起始位置：

const setHandPos = () => {
  nextTick(() => {
    let plane = scene.getObjectByName("地面")
    let point1 = transPos(10, window.innerHeight - 10) // 手牌区起始位置的屏幕坐标
    let point2 = transPos(window.innerWidth * 0.65, window.innerHeight - 10) // 手牌区结束位置的屏幕坐标
    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.005, 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.005 * i, 0)
        handGroup.add( mesh );
      }
    })
  })
}

此时页面效果应该如下所示：

现在我们开始创建卡组：

1.和之前新建hand手牌区一样，我们在目录下新建deck文件夹，存放卡组相关代码：

然后我们在game/index.vue中引入deck组件：

<template>
  <div ref="sceneRef" class="scene"></div>
  <!-- 手牌 -->
  <Hand ref="handRef"/>
  <!-- 卡组 -->
  <Deck ref="deckRef"/>
</template>

<script setup lang="ts">
import Hand from "./hand/index.vue"
import Deck from "./deck/index.vue"

...
</script>

2.我们使用一个测试卡组来生成卡组里的卡牌，由于卡组是多张卡牌摞在一起，所以我们需要调整每张卡牌的位置高度，同时由于卡牌是盖放，所以我们通过rotateX进行180度翻转：

// 卡组group
const deckGroup = new THREE.Group()
deckGroup.name = "p1_deckGroup"
scene.add(deckGroup)

// 测试卡组
const deckList = [
  "YZ-01",
  "YZ-02",
  "YZ-03",
  "YZ-04",
  "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(0, 0.005 * i, 0)
      mesh.rotateX(180 * (Math.PI / 180)) // 弧度
      deckGroup.add( mesh );
    }
  })
}

刷新页面效果如下：

稍微旋转下可以看到卡牌是叠放在一起的：

下面我想在卡组顶上加一个数字用来标示卡组中卡牌的数量，从threejs文档中可以看到有几种生成文字的方式，这里我选择的是用threejs自带的文字几何体绘制：

首先从node_modules中找到three内置的font，然后复制到public目录下：

修改deck/p1.vue代码，这里除了生成文字，还添加了文字的阴影：

const _font = ref()

loader.load('fonts/helvetiker_regular.typeface.json', (font: any) => {
  _font.value = font
  renderText()
});

// 渲染文字
const renderText = () => {
  const geometry = new TextGeometry( `${deckList.length}`, {
    font: _font.value,
    size: 0.4,
    height: 0,
    curveSegments: 4,
    bevelEnabled: true,
    bevelThickness: 0,
    bevelSize: 0,
    bevelSegments: 0
  });
  geometry.center()
  const material = new THREE.MeshBasicMaterial( { color: new THREE.Color("white") } )
  const mesh = new THREE.Mesh( geometry, material ) ;
  mesh.position.set(0, 0.005 * deckList.length + 0.01, 0) // 弧度
  mesh.rotateX(-90 * (Math.PI / 180)) // 弧度

  // 阴影
  let shadowGeometry = geometry.clone()
  shadowGeometry.translate(0.02, 0.02, 0);
  let shadowMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color("black") } );
  let shadowMesh = new THREE.Mesh(shadowGeometry, shadowMaterial);
  shadowMesh.position.set(0, 0.005 * deckList.length, 0) // 弧度
  shadowMesh.rotateX(-90 * (Math.PI / 180)) // 弧度

  deckGroup.add(mesh)
  deckGroup.add(shadowMesh)
}

页面效果如下：

接下来调整卡组位置，将它移动到右下角：

const init = () => {
  setDeckPos()
  ...
}

// 设置卡组位置
const setDeckPos = () => {
  nextTick(() => {
    let plane = scene.getObjectByName("地面")
    let point = transPos(window.innerWidth - 15, window.innerHeight - 15) // 卡组起始位置的屏幕坐标
    // 
    raycaster.setFromCamera( point, camera );
    const intersects1 = raycaster.intersectObject( plane );
    if (intersects1.length > 0) {
      let point = intersects1[0].point
      // deckGroup.position.set(point.x, point.y, point.z)
      deckGroup.position.set(point.x - 0.5, point.y, point.z - 0.7)
    }
  })
}

页面效果如下：

deck/p1.vue完整代码如下：

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

<script setup lang="ts">
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, getCurrentInstance, nextTick } from 'vue'
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
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 } 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 loader = new FontLoader();

const _font = ref()

// 卡组group
const deckGroup = new THREE.Group()
deckGroup.name = "p1_deckGroup"
scene.add(deckGroup)

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

const init = () => {
  setDeckPos()
  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(0, 0.005 * i, 0)
      mesh.rotateX(180 * (Math.PI / 180)) // 弧度
      deckGroup.add( mesh );
    }
  })

  loader.load('fonts/helvetiker_regular.typeface.json', (font: any) => {
    _font.value = font
    renderText()
  });

}

// 渲染文字
const renderText = () => {
  const geometry = new TextGeometry( `${deckList.length}`, {
    font: _font.value,
    size: 0.4,
    height: 0,
    curveSegments: 4,
    bevelEnabled: true,
    bevelThickness: 0,
    bevelSize: 0,
    bevelSegments: 0
  });
  geometry.center()
  const material = new THREE.MeshBasicMaterial( { color: new THREE.Color("white") } )
  const mesh = new THREE.Mesh( geometry, material ) ;
  mesh.position.set(0, 0.005 * deckList.length + 0.01, 0) // 弧度
  mesh.rotateX(-90 * (Math.PI / 180)) // 弧度

  // 阴影
  let shadowGeometry = geometry.clone()
  shadowGeometry.translate(0.02, 0.02, 0);
  let shadowMaterial = new THREE.MeshBasicMaterial( { color: new THREE.Color("black") } );
  let shadowMesh = new THREE.Mesh(shadowGeometry, shadowMaterial);
  shadowMesh.position.set(0, 0.005 * deckList.length, 0) // 弧度
  shadowMesh.rotateX(-90 * (Math.PI / 180)) // 弧度

  deckGroup.add(mesh)
  deckGroup.add(shadowMesh)
}

// 设置卡组位置
const setDeckPos = () => {
  nextTick(() => {
    let plane = scene.getObjectByName("地面")
    let point = transPos(window.innerWidth - 15, window.innerHeight - 15) // 卡组起始位置的屏幕坐标
    // 
    raycaster.setFromCamera( point, camera );
    const intersects1 = raycaster.intersectObject( plane );
    if (intersects1.length > 0) {
      let point = intersects1[0].point
      // deckGroup.position.set(point.x, point.y, point.z)
      deckGroup.position.set(point.x - 0.5, point.y, point.z - 0.7)
    }
  })
}

defineExpose({
  init
})
</script>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1536600.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ZHUTI主提2024夏季系列 —「逐·行」

ZHUTI主提2024夏季系列 —「逐·行」

ZHUTI主提全新发布2024夏季「逐行」系列&#xff0c;聚焦当下人与自然的关系&#xff0c;以衣为载体&#xff0c;秉承东方哲学的艺术理念&#xff0c;将美学艺术与主流时尚设计融合&#xff0c;赋予当代时装表达新方向&#xff0c;共创现代女性之美。 取自然之意境&#xff0c…
阅读更多...
开发调试、远程访问、内网穿透解决方案集合

开发调试、远程访问、内网穿透解决方案集合

开发调试、远程访问、内网穿透解决方案集合 前言Cpolar下载安装配置与使用 Ngrok购买隧道下客户端配置与使用 ZeroTier注册与安装创建虚拟网络加入虚拟网络配置授权 花生壳Centos系统Ubuntu系统使用花生壳控制台SN码登录添加映射 Loophole通过CLI方式安装登录与注销简单使用身份…
阅读更多...
数据结构--链表刷题(一)快慢指针

数据结构--链表刷题(一)快慢指针

1.快慢指针 先看一道简单的题目&#xff1a;返回中间结点 这道题有一个最朴素的做法就是先遍历一边链表&#xff0c;设置计数器求出链表长度&#xff0c;再重新走1/2的链表长度&#xff0c;即可返回中间节点 // 第二种解法 //这种解法需要遍历两次链表ListNode cur1 head;int…
阅读更多...
适用于vue3的vant4组件 没有日期时间选择器

适用于vue3的vant4组件 没有日期时间选择器

项目中需要用到日期和时间一同选择的场景 本来想用 如下代码 van-datetime-picker 发现咋整也不好使 刚开始还以为是引入的问题 后来发现是vant4根本就没这玩应了… <van-datetime-pickerv-model"currentDate"type"datetime"title"选择完整时间&q…
阅读更多...
PagePlug多条件查询方案

PagePlug多条件查询方案

正确实现 使用Case When来编写查询条件 SELECT * FROM pc_ticket_tax_cloud WHERE 11 AND (CASE WHEN {{data_table.searchText ! }} THEN xsddm like {{data_table.searchText || ""}}%ELSE 11 END ) AND (CASE WHEN {{doc_code_input.text ! }} THEN doc_code li…
阅读更多...
程序猿成长之路之番外篇——矩阵算法

程序猿成长之路之番外篇——矩阵算法

今天在复习线性代数知识的过程中&#xff0c;用java语言简单实现了一下矩阵算法。 数学知识回顾 1.什么是矩阵 在数学领域&#xff0c;矩阵就像一个表格&#xff0c;将数据排放进去&#xff0c;形成一个矩形。我们习惯用一个大括号把矩阵内的数据包括进来。 1.矩阵 在数学领域…
阅读更多...
superset 二开增加 flink 数据源连接通过flink sql 查询数据

superset 二开增加 flink 数据源连接通过flink sql 查询数据

前言 superset 目前还不支持 flink 的数据源连接&#xff0c;目前我们公司在探索使用数据湖那一套东西&#xff1a; 使用 flink 作为计算引擎使用 paimon oss对象存储对接 flink 作为底层存储使用 superset 通过 flink gateway 查询 paimon 数据形成报表 增加flink数据源 …
阅读更多...
Linux--进程（1）

Linux--进程（1）

目录 前言 1.冯诺依曼体系结构 2. 操作系统(Operator System)--第一个被加载的软件 3.进程 3.1基本概念 3.2Linux中的PCB 3.3通过系统调用创建子进程-fork初识 fork&#xff1a;创建一个子进程 为什么要创建子进程&#xff1f; fork的原理&#xff1a; 进一步了解fo…
阅读更多...
黄仁勋对话Transformer七位作者：今天发生的一切都可以追溯到那一刻

黄仁勋对话Transformer七位作者：今天发生的一切都可以追溯到那一刻

关注文章底部的公众号，获取每日AI最新新闻 获取每日资讯 本周三，关于Transformer神经网络架构的开创性研究论文《Attention Is All You Need》作者们在GTC上齐聚一堂。 在GTC的900多个会议中，最受欢迎的是由NVIDIA创始人兼首席执行官黄仁勋主持的与传奇论文七位作者的交流。…
阅读更多...
手上积累了一些企业目录，但是没有电话，在企XX天X查也没找到咋办？如何快速精准批量查询其他平台上查不到的企业电话？

手上积累了一些企业目录，但是没有电话，在企XX天X查也没找到咋办？如何快速精准批量查询其他平台上查不到的企业电话？

在B端业务场景中&#xff0c;长期需要进行拓客。有时候是企业提供客户的联系方式&#xff0c;有时候是销售利用自己的人脉资源&#xff0c;对于资源不多的销售就需要查找到目标客户的联系方式。长期来说&#xff0c;销售都需要进行拓客&#xff0c;自己通过社交&#xff0c;网络…
阅读更多...
ATA-5310前置微小信号放大器在红外线传感器中的应用

ATA-5310前置微小信号放大器在红外线传感器中的应用

当涉及到红外线传感器时&#xff0c;前置微小信号放大器扮演着关键的角色。红外线传感器是一种用于探测和测量红外辐射的设备&#xff0c;它们通常用于热成像、物体检测、温度测量、动作检测等应用中。前置微小信号放大器在红外线传感器中的应用具有重要意义&#xff0c;下面将…
阅读更多...
Vue js封装接口

Vue js封装接口

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1.安装axios npm install axios -g 2.在src下新建一个Api文件夹,再创建一个js文件 import axios from axios let configuration {url:"http://localhost:9090" } /*** 请求项目数据的请求体*/ async function h…
阅读更多...
从错误中进行上下文学习

从错误中进行上下文学习

1、写作动机&#xff1a; 在上下文学习中&#xff0c;也称为少样本提示&#xff08;ICL&#xff09;&#xff0c;一直是调整LLM适应下游任务的标准方法&#xff0c;通过从少量输入-输出示例中学习。然而&#xff0c;所有基于ICL的方法都只从正确的输入-输出对中学习。 2、主要…
阅读更多...
C++的内存管理

C++的内存管理

目录 1. C/C内存分布 2. C语言中动态内存管理方式 3. C内存管理方式 3.1 new/delete操作内置类型 4. operator new与operator delete函数 4.1 连续开辟空间(尽力了解) 5. new和delete的实现原理 5.1 内置类型 5.2 自定义类型 6. 深入理解 6.1malloc/free和new/delete的区…
阅读更多...
探索多视角驱动的层次内容感知网络用于指静脉识别

探索多视角驱动的层次内容感知网络用于指静脉识别

文章目录 探索多视角驱动的层次内容感知网络用于指静脉识别总结摘要介绍相关工作多视角方法长短时记忆基于视角的目标表达 方法全局主干网络局部感知模块损失函数 实验和分析数据库实验设置和训练策略消融实验视角一致性的效果 参考文献 论文: Exploiting Multiperspective Dr…
阅读更多...
小米相册提取表格选项消失解决方法

小米相册提取表格选项消失解决方法

小米相册这次的提取表格选项消失 故障原因&#xff1a; 因为部分用户将小爱视觉&#xff08;原名扫一扫&#xff09;这个应用给卸载了导致 解决方法 应用商店下载 小爱视觉 安装后授权即可使用 注意&#xff1a;系统最好为最新的 Xiaomi HyperOS系统
阅读更多...
抖音小店保证金是多少？怎么缴纳？最全的解答来了！

抖音小店保证金是多少？怎么缴纳？最全的解答来了！

大家好&#xff0c;我是电商糖果 关于抖音小店的保证金&#xff0c;很多人并不太了解。 再加上保证金每年都会有变动&#xff0c;造成很多想开店的商家完全不懂&#xff0c;应该准备多少钱&#xff0c;以及如何缴纳&#xff1f; 这里糖果就给大家总结一下&#xff0c;想开店…
阅读更多...
基于SSM+Jsp+Mysql的高校二手交易平台

基于SSM+Jsp+Mysql的高校二手交易平台

基于SSMJspMysql的高校二手交易平台 基于SSMJspMysql的高校二手交易平台的设计与实现 开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff0…
阅读更多...
JetBrains全家桶激活，分享 GoLand 2024 激活的方案

JetBrains全家桶激活，分享 GoLand 2024 激活的方案

大家好&#xff0c;欢迎来到金榜探云手&#xff01; GoLand 公司简介 JetBrains 是一家专注于开发工具的软件公司&#xff0c;总部位于捷克。他们以提供强大的集成开发环境&#xff08;IDE&#xff09;而闻名&#xff0c;如 IntelliJ IDEA、PyCharm、和 GoLand等。这些工具被…
阅读更多...
AI智能分析网关V4在非煤矿山安全生产视频智能监管场景中的应用

AI智能分析网关V4在非煤矿山安全生产视频智能监管场景中的应用

近年来&#xff0c;全国非煤矿山&#xff08;&#xff08;含金属非金属矿山、尾矿库&#xff0c;以及矿泉水等其他矿山&#xff09;安全生产工作取得明显成效&#xff0c;但安全基础仍然薄弱&#xff0c;事故总量仍然较大&#xff0c;重特大事故尚未得到根本遏制&#xff0c;安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023