scp [options] source_file [user@]host1:destination_file

The key elements are:

• [options]: Various options you can use to customize the SCP command, such as -r for recursive copying, -C for compression, -P for specifying the port, etc.

• source_file: The file or directory you want to copy, which can be local or on a remote host.

• [user@]host1: The remote host you want to copy the file to, along with the username if required.

• destination_file: The location on the remote host where you want to copy the file.

Some common examples of using SCP:

• Copy a local file to a remote host:

    scp local_file.txt user@remote_host:/remote/directory/
  

• Copy a remote file to the local machine:

    scp user@remote_host:/remote/file.txt /local/directory/
  

• Copy a directory recursively from local to remote:

    scp -r local_directory/ user@remote_host:/remote/directory/
  

• Copy between two remote hosts:

    scp user1@host1:/remote/file.txt user2@host2:/remote/directory/
  

The SCP command uses SSH for secure authentication and encryption, so you'll need to have SSH access to the remote host. You may also need to specify the SSH private key file using the -i option if you're using key-based authentication.Overall, the SCP command provides a simple and secure way to transfer files between local and remote systems over a network.

From 2021-08-13, GitHub is no longer accepting account passwords when authenticating Git operations. You need to add a PAT (Personal Access Token) instead, and you can follow the below method to add a PAT on your system.

Create Personal Access Token on GitHub

From your GitHub account, go to Settings → Developer Settings → Personal Access Token → Tokens (classic) → Generate New Token (Give your password) → Fillup the form → click Generate token → Copy the generated Token, it will be something like ghp_sFhFssdfdfgfhtLjmks4Tzuzgthdvfsrta

on My Ubuntu:

For Linux, you need to configure the local GIT client with a username and email address,

$ git config --global user.name "your_github_username"
$ git config --global user.email "your_github_email"
$ git config -l

Once GIT is configured, we can begin using it to access GitHub. Example:

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `YOUR-REPOSITORY`...
Username: <type your username>
Password: <type your password or personal access token (GitHub)

Now cache the given record in your computer to remembers the token:

$ git config --global credential.helper cache

If needed, anytime you can delete the cache record by:

$ git config --global --unset credential.helper
$ git config --system --unset credential.helper

Now try to pull with -v to verify

$ git pull -v

在日常的全栈开发过程中,往往会同时启动服务器和客户端工程,分别启动服务器和客户端往往会不可避免的造成一定时间浪费和开发流程繁杂.本着能躺着就别坐着的原则,在万能的npm库中找到了concurrently

使用concurrently同时运行多个命令

如下面package.json内的脚本代码所示,concurrently将服务端及客户端项目的启动合并在一起了.妈妈再也不用担心我浪费时间在启动项目上了😊.

"scripts": {
    "start": "concurrently --kill-others-on-fail \"npm run start-server\" \"npm run start-client\"",
    "start-server": "ts-node server/src/index.ts",
    "start-client": "cd client && npm run start"
    }

• Three.js官方文档
• Orillusion官方
• MIT 线性代数 1080p高清修复重制
• threejs-university
• 《WebGL编程指南》

对3D和Three.js形成了一个初步的认识。

然后，基于https://github.com/hvidal/WebGL-Shooter项目，完成了一个类塔防的物理射击游戏。Github地址

关键概念

两个主体世界

• Three.js的视图世界 THREE.Scene
• Ammo.js的物理世界 Ammo.btDiscreteDynamicsWorld

通过设置THREE.Object3D 的userData.physicsBody为Ammo.btRigidBody,即使Three.js的物体添加到物理世界。

每帧更新物理世界的坐标,旋转等各项数据到视图世界，完成位移碰撞的及时调整。

for (let i = 0; i < len; i++) {
            var objThree = this.rigidBodies[i];
            var motionState = objThree.userData.physicsBody.getMotionState();
            if (motionState) {
                motionState.getWorldTransform(this.tempTransform);

                let p = this.tempTransform.getOrigin();
                objThree.position.set(p.x(), p.y(), p.z());

                let q = this.tempTransform.getRotation();
                objThree.quaternion.set(q.x(), q.y(), q.z(), q.w());
            }
        }

基础内容

－创建Three.js场景

        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setClearColor(clearColor);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        element.appendChild(this.renderer.domElement);
        this.scene = new THREE.Scene();

• 创建Ammo.js物理世界

        const collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
        const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
        const overlappingPairCache = new Ammo.btAxisSweep3(new Ammo.btVector3(-1000, -1000, -1000), new Ammo.btVector3(1000, 1000, 1000));
        const solver = new Ammo.btSequentialImpulseConstraintSolver();
  
        this.physicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
        this.physicsWorld.setGravity(new Ammo.btVector3(0, -16, 0));
  

• 射击逻辑

shoot() {
        this.raycaster.setFromCamera(this.screenCenter, this.camera);

        this.pos.copy(this.raycaster.ray.direction);
        this.pos.add(this.raycaster.ray.origin);
        this.pos.setZ(this.pos.z - 10);

        const ball = this.factory.createSphere(this.radius, this.mass, this.pos, this.quat, this.ballMaterial);
        ball.castShadow = true;
        ball.receiveShadow = true;

        const body = ball.userData.physicsBody;
        this.pos.copy(this.raycaster.ray.direction);
        this.pos.multiplyScalar(160);
//调整子弹速度
        body.setLinearVelocity(new Ammo.btVector3(this.pos.x, this.pos.y, this.pos.z));
    }

增加内容:

• 连击实现

  //鼠标按下之后，间隔时间超过0.2秒即射击一次
  if (isMouseDowning && duration > 0.2) {
                duration = 0;
                mouseShooter.shoot();
            }
  

• 计时作为最终的游戏得分

  function recordTotalTime() {
            if (beginTime == 0) {
                beginTime = new Date().getTime();
            } else {
                let _currentTime = new Date().getTime();
                totalTime += (_currentTime - beginTime);
                document.getElementById('scoreBar').innerHTML = Math.floor(totalTime / 1000) + "." + totalTime % 1000;
                beginTime = _currentTime;
            }
        }
  

• 游戏结束判断（物体在斜坡底部掉落）

  //斜坡底部的z坐标值计算
  var edgeZ = Math.cos(groundRotationX) * groundScaleZ / 2;
  

  //判断斜坡上的物体的z轴坐标是否大于斜坡底部的z坐标值
    private checkGameOver(controls, edgeZ): boolean {
        const len = this.rigidBodies_slope.length;
        for (let i = 0; i < len; i++) {
            var objThree = this.rigidBodies_slope[i];
            if (objThree.position.z > edgeZ) {
                controls.enabled = false;
                const message = document.getElementById('message');
                const blocker = document.getElementById('blocker');
                const gameOver = document.getElementById('gameOver');
                blocker.style.display = 'none';
                message.style.display = 'none';
                gameOver.style.display = 'block';
                lockPointer(controls);
                document.getElementById('score').innerHTML = document.getElementById('scoreBar').innerHTML;
                this.isGameOver = true;
                return true;
            }
        }
    }
  

没想到用three.js和ammo.js做一个小DEMO会花这么多时间去学习,通过这个学习的过程也了解到了3D和物理相关的知识在广度和深度上都是值得去探索的，后面我也会继续在web3D的方向上继续探索学习。

做难而正确的事情，让正确的事情持续发生。

当我得知此消息后，第一时间通过邮件的方式帮助他联系了Epic官方客服，没想很快就收到对方的回信，确定了本机原因后，对方给出了如下3个解决方案。 最终我的朋友通过第一个解决方案找回了他的所有游戏，于是乎，我的朋友像往常一样，进入了他的游戏世界，快乐得像个孙子。

Disable fullscreen optimization

• Shut down Epic Games launcher completely.
• Go into the directory where it is installed, right-click on the launcher exe file, and click properties (Epic Games\Launcher\Engine\Binaries\Win64\EpicGamesLauncher.exe).
• Go into the Compatibility tab.
• Make sure you check the "Disable fullscreen optimizations".
• While you are there, you can also check "Run this program as an administrator". Click Apply and Ok

Clear your launcher’s webcache

• Exit the Epic Games Launcher by right-clicking the system tray icon in the bottom-right corner, and then clicking Exit.
• Press Windows key + R, type “%localappdata%”, and then press Enter to open a File Explorer window.
• Open the Epic Games Launcher folder.
• Open the Saved folder.
• Click the webcache folder, and then delete it.
• If there is a folder called webcache_4147 that can be deleted as well
• Restart your computer, and then relaunch the Epic Games Launcher.

Reinstall the Epic Games Launcher

Note: The following process will remove all of your installed games.

• Close the Epic Games launcher by right-clicking the system tray icon in the bottom right corner and then clicking Exit.
• Click Start.
• Type "cmd", right-click Command Prompt, and then click Run as administrator. In the window that opens, type "sfc /scannow", and then press Enter. This may take a little while.
• Restart your computer.
• Click Start.
• Type "Add or Remove Programs", and then press Enter.
• Select Epic Games Launcher from the list of programs.
• Click Uninstall.
• Go to www.epicgames.com and click Get Epic Games in the top right corner to download the latest installer.

To enable HTTPS on your website, you need to get a certificate (a type of file) from a Certificate Authority (CA). Let’s Encrypt is a CA. In order to get a certificate for your website’s domain from Let’s Encrypt, you have to demonstrate control over the domain.

Follow the instructions with certbot to get the certificate from let’s encrypt

sudo http-server -a 0.0.0.0 -p 443 -S -K /etc/letsencrypt/live/www.dogdogame.com/privkey.pem -C /etc/letsencrypt/live/www.dogdogame.com/fullchain.pem

起因

全职工作上的项目因为版号、人员的问题处于一个功能完整等待上线的阶段，所以这段时间有更多的时间写一些自己感兴趣的东西，把之前想实现的程序串起来跑一下。

我是从小的时候开始就喜欢博客这个东西，小学初中就爱在QQ空间发一些有的没的现在看起来有点不知所云的文章。再后来微博之类的短文发布流行起来，qq空间慢慢变为小学生空间，微信开始完熟人圈子社交，我就基本上处于一个潜水的状态。发现Hashnode这个平台纯属意外，我甚至都忘了在哪里看到的，在这里你可以把博客绑定到自己的域名，可以把文章以Markdown的格式自动备份到Github，仅此两点就已深得我心，直接抛弃自建博客网站的异念。

前前后后总共写了20篇，其中有一个”如何做一个多人联机卡牌游戏“系列还在持续更新中，大多数文章都是在代码实现的基础上完成的，文字内容很少，相当于是项目实现历程的文字记录。

上面废话了起因，下面来说说经过（承上启下）。

经过&体会&感悟

介于自己以前的浅薄人生经历，有几件事情是写了博客才有幸深刻体会

• 一件事情或者一个技能，知道、会用 与能够清晰地表达出来可以说是两回事。这中间存在一个知识的内化过程，以及发现提出问题->剖析问题->分解问题->解决问题的流程认知。
• 持续地有规律的坚持一件事情，在还没形成习惯或一定程度的正向反馈的时候，是反人性的，我们都会以各种借口在各个阶段选择放弃。一般会经历前期的兴奋，中期的倦怠，然后就没有然后了，所谓“从入门到放弃”就是很好的诠释。
• 内容的输出是二次输入，输出会倒逼输入。
• 写也是想法产出的一部分，下笔或打字的时候是真的会促进思考的。
• 随时记下灵感，然后组合成一个比较完整的内容。
• 多看，多听。看博客看新闻看社交媒体看身边的人都在手机上干什么，听播客听视频听周围的人都在说些什么，能够发现很多意想不到的收获，比如对一个产品的需求。
• 运动会产生多巴胺、血清素、内啡肽，能够提高大脑的活跃度。
• 有意识的拓展认知的边界，通过网课、书籍、讲座了解一下跟自己所处完全不同行业，完全不同的职能的东西。通过这个动作，有时候会感受到一些好的东西，好的人的共性，要是能把握住这个共性，就很了不起了。
• 不要所有的东西都泛泛而学，然后感觉自己什么都懂一丢丢，谭警官问你能不能懂的时候，你只会说，“只能懂一点点”，始终上不了成华大道。所以必须要有自己专注的领域，因为社会分工的大环境下，更需要专才，当然一专多能是更好的，但前提就是要有砖才行。在学习的前期，富有余力的情况下，可以考虑先广度后深度的模式。
• 千万不要做个苦行僧。很多时候我们被一句话、一首歌、一本书、一个人点燃了，然后就想干票大的，自己要怎么怎么头悬梁锥刺股，九九八十一天之后让别人刮目相看。我们要尊重自然，尊重人是自然界的一个生物，不是超脱于三界之外的游神，按照生物喜欢的方式对待自己，认识自己，循循善诱，比如在准备搞事情之前来一杯甜甜的拿铁。
• 肝不动了就休息，人在睡觉的时候大脑还没睡，大脑还在自主运转，对缓存区的进行整理，对垃圾信息进行回收，休息好了往往事半功倍。
• 做能让自己兴奋的事情，比如我在写代码实现自己想实现的东西的时候就非常兴奋，看见别人的好项目的时候也是如此，分享自己的拙见的时候也会很明显的感觉到快乐，并且这种兴奋会正向反馈给你，促使你下一次继续做这个事情。这可能就是兴趣的定义吧。我看见好多博主，有一个共同的现象，集中在一段时间内发布了好多内容，后面更新的频率就很慢了，然后就消失了，跟我以前报健身房的经历一模一样。排除一些不可抗力因素，这当中应该是少了一点兴趣成分，要不然怎么爱因斯塔会说“兴趣是最好的老师”呢。
• 避免掉入规整主义，完美主义的陷阱。感觉自己要开始搞一件大事了，要部署各种软硬件环境，被别人安利各种生产力工具，配上牛逼的电脑，椅子，桌子，键盘，鼠标，耳机，游戏机（逃...）。然后自己都忘了自己要干嘛了。先做起来再说，要把握核心，比如目标是向前走1000米，迈开步走就行了，什么跑鞋，跑袜，运动套装，智能设备，都可以在走的过程中按需添置。学会感受混沌之美，太极之美，中庸之美。鲁迅曾经说过：Just Do It.就是这个道理。
• 要设定目标，并设定一个需要用劲儿才能实现的目标。唐太宗曾经说过“取法于上,仅得为中,取法于中,故为其下”，意思是你定个小目标相当于啥都得不到。
• 遵循一个简单的原则，老子曾说，一生二，二生三，三生万物。牛逼的东西往往是简单的，考虑东西不要搞得过于复杂。
• 人们大都喜闻乐见少年有成，这和喜欢中500万福利彩票一样。种一棵树最好的时间有两个，一个是10年前，一个是现在。认准了，喜欢就去做，什么时候都不晚。日拱一卒，功不唐捐。
• 成年人，学会放低自己的身段，减少自作多情，大多数时候，一个人取得的成就很大程度上是时代造就的，不要太把自己当回事，顺势而为，实干兴邦。
• 保持自信，甚至骗自己自信。
• 坚持主见，批判接受别人的意见建议，辩证看待别人的得失。举个不恰当的例子，路人阿姨看见你撸铁的时候累的上气不接下气，说你这个太辛苦了，但她无法体会你在撸完后有多爽；你看见妹纸在开心地吃冰淇淋，但是你感受不到1个月后她节食天天吃全麦面包的无味。
• 认识事物的本质，并保持初心。比如写个文章，虽然写得丑且简单，但目的始终是内容的输出,如果加上一些浏览量，点赞量，评论量之类的可以量化的数据上来的时候，往往会让人模糊认知，忘掉初心,仿佛不是在自己写,而是在写给别人看,然后就开始想如何迎合观众。

一口气写了一大堆字，好像有点走偏了，那就尬结一下

结果

这三个月，相对来说过得很充实，对我产生了一些影响，比如像上面一样疯狂输出垃圾话的能力，这个过程中不仅仅是写博客本身，更多的是写博客带给我的思考，促发我去探索边界，归纳总结，产生新知。

废话不多说，只要能产生自己与自己，或自己与他人之间有意义有深度的东西，就会去写，因为很爽。

对比

• Cocos Creator 是一个比较完整的游戏引擎，有十分方便的可见即可得的可视化编辑器，和大量的开箱即用的可选的功能模块。

• React 是一个JS库，生态极其丰富。

• React-Three-Fiber (下面称R3F)是Three.js的React 渲染器。

用以上三个工具开发了老少皆宜，人尽皆知的斗地主之后，我逐渐喜欢上了React和R3F，主要有一下几个原因：

1. 代码简洁，近乎极致的函数式编程，很多东西都是我之前自己想要去重构实现的，不谋而合的感觉很炸
2. 开发流程纯粹，VsCode一把梭，借助于HMR，代码改动后立马刷新界面，整个开发过程几乎没有界面的切换
3. 控制粒度更细，不管是界面视图界面的布局，还是样式，资源都可以很方便地用代码直接操控，而不用依赖任何其他工具
4. 坑基本被踩的差不多了，遇到的问题只要Google一下，解决方案如排山倒海之势，迎面而来
5. 生态繁荣，相关的各种类型的项目很多，最近就看到了好多基于Three.js实现的游戏，而且活跃度很高
6. R3F也是在React上盖了薄如蝉翼的一层，主要就是把Three.js的一些类封装为react的组件，用jsx表现出来，这也使Three.js的代码变得非常简洁易读，整体上二者的结合带来了易用性又不失灵活度

可以说上面说的几条主要都是与自己更加熟悉的Cocos Creator以及之前使用的一些游戏引擎开发体验的对比。

结论

• 需要快速开发，适配多平台的项目，现阶段毫不犹豫，Cocos Creator，毕竟自家编辑器加持，开发、调试、发布一条龙服务，谁不爱呢
• 做感兴趣的项目，实践学到的一些新东西，我会选react和R3F，之后我也会继续基于R3F开发一些小游戏，边学边练

Why Choose R3F

• R3F just expresses Three.js in JSX, no extra overhead
• Build scenes in a declarative way with react, including but not limited to components that can easily react to state, are easy to interact with, and can leverage React's ecosystem

Scenario construction implementation

• Card

Note that the texture required for rendering is obtained by passing the image address to useTexture

//Card.tsx
import { useTexture } from "@react-three/drei"
import { Mesh } from "three";

function Card(props: { faceTextureUrl: string, idx: number, beginX: number, serial: number }) {
  let _selectedOffsetY = .2;
  let _beginX = props.beginX;
  const _texture = useTexture({
    map: props.faceTextureUrl
  })
  return (
    <mesh
      position={[_beginX + props.idx * .5, 0, props.idx*0.001]}
      onClick={(e: any) => {
        e.stopPropagation();
        let _targetMesh = e["eventObject"] as Mesh;
        let _pos = _targetMesh.position;
        let _upY;
        if (_pos.y == 0) _upY = _selectedOffsetY;
        else _upY = 0;
        _targetMesh.position.set(_pos.x, _upY, _pos.z);
      }}
      userData={{"_d_cardSerial":props.serial}}
    >
      <boxGeometry args={[2, 2, .001]} />
      <meshStandardMaterial {..._texture} />
    </mesh>
  );
}

export default Card;

• Game Scene

First you must declare a Canvas node, because all three.js must be under the Canvas node

<Canvas orthographic camera={{ zoom: 50, position: [0, 0, 100], rotation: [0, 0, 0] }}>
          <R3fScene mainHandCards={mainHandCards} outCards={outCards} gameModel={_gameModel}></R3fScene>
        </Canvas>

In order to facilitate the use of hooks provided by @react-three/fiber (three.js related hooks can only be used under the Canvas node), the game scene node is proposed separately

const R3fScene = (props: { mainHandCards: number[], gameModel, outCards: number[][] }) => {
  const {
    scene,
    camera,
  } = useThree();
  useEffect(() => {
    console.log(scene.getObjectByName("handList"))
  })
  let mainHandCards = props.mainHandCards;
  let _gameModel = props.gameModel;
  _gameModel.context = scene;
  function getFaceTextureUrl(serial): string {
    let _prefix = "/faces/"
    let _readableName = _gameModel.getCardReadableName(serial);
    if (_readableName === "rJkr") return _prefix + "Poker_Joker_B.png"
    else if (_readableName === "bJkr") return _prefix + "Poker_Joker_R.png"
    else {
      let _suitDic = { 0: "D", 1: "C", 2: "H", 3: "S" };
      let _suitNumber: number = serial >> 4;
      return _prefix + "Poker_" + _suitDic[_suitNumber] + _readableName + ".png";
    }
  }

  let _cardCount = mainHandCards.length;
  let _beginX = -((_cardCount-1) * .5+1.5)/2 ;
  return (
    <>
      <CameraControls />
      <ambientLight intensity={0.1} />
      <directionalLight color="white" position={[0, 0, 5]} />

      <group name="handList">
        {mainHandCards.map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[2, 4, 0]} scale={.6} name="out-list-1">
        {props.outCards[1].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[-2, 4, 0]} scale={.6} name="out-list-2">
        {props.outCards[2].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[0, 2, 0]} scale={.6} name="out-list-0">
        {props.outCards[0].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
    </>
  )
}

In order to reflect the 3D interface, add an orbiting camera (swipe the scene to adjust the camera corner)

extend({ OrbitControls });

const CameraControls = () => {
  const {
    camera,
    gl: { domElement }
  } = useThree();
  camera.position.set(0, 0, 10);
  const controls = useRef();
  useFrame((state) => {
    (controls.current as unknown as OrbitControls).update()
  });
  return (
    // @ts-ignore
    <orbitControls
      ref={controls}
      args={[camera, domElement]}
      enableZoom={false}
      maxAzimuthAngle={Math.PI / 4}
      maxPolarAngle={Math.PI / 4}
      minAzimuthAngle={-Math.PI / 4}
      minPolarAngle={0}
      rotationSpeed={0.01}
    />
  );
};

Scene complete code：

//App.tsx
import { useEffect, useRef, useState } from "react";
import {
  Canvas,
  useFrame,
  extend,
  useThree,
} from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import "./App.css"
import Card from './component/Card';
import GameModel from "./base/src/game/model/GameModel";
import GameSceneMediator from "./base/src/game/view/GameSceneMediator";
import GameSceneView from "./component/GameSceneView";

extend({ OrbitControls });

const CameraControls = () => {
  const {
    camera,
    gl: { domElement }
  } = useThree();
  camera.position.set(0, 0, 10);
  const controls = useRef();
  useFrame((state) => {
    (controls.current as unknown as OrbitControls).update()
  });
  return (
    // @ts-ignore
    <orbitControls
      ref={controls}
      args={[camera, domElement]}
      enableZoom={false}
      maxAzimuthAngle={Math.PI / 4}
      maxPolarAngle={Math.PI / 4}
      minAzimuthAngle={-Math.PI / 4}
      minPolarAngle={0}
      rotationSpeed={0.01}
    />
  );
};

const R3fScene = (props: { mainHandCards: number[], gameModel, outCards: number[][] }) => {
  const {
    scene,
    camera,
  } = useThree();
  let mainHandCards = props.mainHandCards;
  let _gameModel = props.gameModel;
  _gameModel.context = scene;
  function getFaceTextureUrl(serial): string {
    let _prefix = "/faces/"
    let _readableName = _gameModel.getCardReadableName(serial);
    if (_readableName === "rJkr") return _prefix + "Poker_Joker_B.png"
    else if (_readableName === "bJkr") return _prefix + "Poker_Joker_R.png"
    else {
      let _suitDic = { 0: "D", 1: "C", 2: "H", 3: "S" };
      let _suitNumber: number = serial >> 4;
      return _prefix + "Poker_" + _suitDic[_suitNumber] + _readableName + ".png";
    }
  }

  let _cardCount = mainHandCards.length;
  let _beginX = -((_cardCount-1) * .5+1.5)/2 ;
  return (
    <>
      <CameraControls />
      <ambientLight intensity={0.1} />
      <directionalLight color="white" position={[0, 0, 5]} />

      <group name="handList">
        {mainHandCards.map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[2, 4, 0]} scale={.6} name="out-list-1">
        {props.outCards[1].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[-2, 4, 0]} scale={.6} name="out-list-2">
        {props.outCards[2].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[0, 2, 0]} scale={.6} name="out-list-0">
        {props.outCards[0].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
    </>
  )
}

function App(props: any) {
  let _gameFacade = props.gameFacade;
  let _gameModel: GameModel = _gameFacade.retrieveProxy("GameModel");
  let [mainHandCards, setMainHandCards] = useState(_gameModel.cardsArr);
  let [outCards, setOutCards] = useState(_gameModel.outCards);
  _gameModel.setMainHandCardsHook(setMainHandCards);
  _gameModel.setOutCardsHook(setOutCards);

  useEffect(() => {
    if (_gameFacade.retrieveMediator("GameSceneMediator") == null) {
      _gameFacade.registerMediator(new GameSceneMediator(null, new GameSceneView()));
    }
  });

  return (
    <>
      <div id='canvas-container'>
        <Canvas orthographic camera={{ zoom: 50, position: [0, 0, 100], rotation: [0, 0, 0] }}>
          <R3fScene mainHandCards={mainHandCards} outCards={outCards} gameModel={_gameModel}></R3fScene>
        </Canvas>
      </div>

      <div id="status" style={{ display: 'fix', textAlign: 'center', fontSize: "2em", userSelect: "none" }}>hello</div>
      <div id='controlPanel-scores' className='controlPanel'>
        <button id='controlPanel-scores-1' className='controlButton'>1</button>
        <button id='controlPanel-scores-2' className='controlButton'>2</button>
        <button id='controlPanel-scores-3' className='controlButton'>3</button>
      </div>

      <div id='controlPanel-operation' className='controlPanel'>
        <button id='controlPanel-operation-pass' className='controlButton'>pass</button>
        <button id='controlPanel-operation-play' className='controlButton'>play</button>
      </div>
    </>
  );
}

export default App;

Framework adaptation changes

• Getting scene node

getViewComponent(name: string,isDOM:boolean = true,canvasScene:any = null) {
        if(isDOM) return document.getElementById(name);
        else {
            if(canvasScene) return canvasScene.getObjectByName(name);
        }
    }

By passing in the scene object of three.js, call the getObjectByName interface to obtain the node with the pre-set name attribute

• Card value acquisition, card.userData (userData is the loading object of custom attributes in R3F, similar to data-yourAttribute in react, here you can encapsulate a method to decouple GameSceneMediator from card value, making the mediator more reusable )

private onOutCards_C2S() {
        this.hideControlPanel();
        let _outCardsSerial = [];
        let _cardsContainer = this.mViewClass.getViewComponent("handList",false,this.getGameModel().context);
        let _cards = _cardsContainer.children;
        for (let i = 0; i < _cards.length; i++) {
            let _card = _cards[i];
            if (this.mViewClass.isCardSelected(_card)) {
                _outCardsSerial.push(_card.userData["_d_cardSerial"]||_card["_d_cardSerial"] || _card.getAttribute("data-card-serial"));
            }
        }
        this.getNetFacade()?.sendNotification(card_game_pb.Cmd.PLAYCARDS_C2S, _outCardsSerial);
    }

• Node coordinate adjustment

By judging the adjustment of the corresponding css attribute of the node style to the corresponding attribute of the node position object

isCardSelected(card) {
        return card.position.y == .2 ? true : false;
    }

Checkout the repo https://github.com/lizhiyu-me/Make-a-multiplayer-card-game/tree/episode7-r3f

本节主要介绍利用react-three-fiber(以下简称R3F)实现交互场景的搭建。

为什么选择R3F

• R3F仅仅是将Three.js用JSX进行表示，没有额外开销
• 可以用react的声明方式构建场景，包括但不限于组件可轻松对状态做出反应，易于交互，并且可以利用 React 的生态

场景构建实现

• 扑克牌

注意此处通过将图片地址传给useTexture，得到渲染需要的纹理

//Card.tsx
import { useTexture } from "@react-three/drei"
import { Mesh } from "three";

function Card(props: { faceTextureUrl: string, idx: number, beginX: number, serial: number }) {
  let _selectedOffsetY = .2;
  let _beginX = props.beginX;
  const _texture = useTexture({
    map: props.faceTextureUrl
  })
  return (
    <mesh
      position={[_beginX + props.idx * .5, 0, props.idx*0.001]}
      onClick={(e: any) => {
        e.stopPropagation();
        let _targetMesh = e["eventObject"] as Mesh;
        let _pos = _targetMesh.position;
        let _upY;
        if (_pos.y == 0) _upY = _selectedOffsetY;
        else _upY = 0;
        _targetMesh.position.set(_pos.x, _upY, _pos.z);
      }}
      userData={{"_d_cardSerial":props.serial}}
    >
      <boxGeometry args={[2, 2, .001]} />
      <meshStandardMaterial {..._texture} />
    </mesh>
  );
}

export default Card;

• 游戏场景

首先必须声明一个Canvas节点，因为three.js的所有都必须在Canvas节点下

<Canvas orthographic camera={{ zoom: 50, position: [0, 0, 100], rotation: [0, 0, 0] }}>
          <R3fScene mainHandCards={mainHandCards} outCards={outCards} gameModel={_gameModel}></R3fScene>
        </Canvas>

为了方便使用@react-three/fiber提供的hook（three.js相关的hook只能在Canvas节点下使用）,将游戏场景节点单独提出来

const R3fScene = (props: { mainHandCards: number[], gameModel, outCards: number[][] }) => {
  const {
    scene,
    camera,
  } = useThree();
  useEffect(() => {
    console.log(scene.getObjectByName("handList"))
  })
  let mainHandCards = props.mainHandCards;
  let _gameModel = props.gameModel;
  _gameModel.context = scene;
  function getFaceTextureUrl(serial): string {
    let _prefix = "/faces/"
    let _readableName = _gameModel.getCardReadableName(serial);
    if (_readableName === "rJkr") return _prefix + "Poker_Joker_B.png"
    else if (_readableName === "bJkr") return _prefix + "Poker_Joker_R.png"
    else {
      let _suitDic = { 0: "D", 1: "C", 2: "H", 3: "S" };
      let _suitNumber: number = serial >> 4;
      return _prefix + "Poker_" + _suitDic[_suitNumber] + _readableName + ".png";
    }
  }

  let _cardCount = mainHandCards.length;
  let _beginX = -((_cardCount-1) * .5+1.5)/2 ;
  return (
    <>
      <CameraControls />
      <ambientLight intensity={0.1} />
      <directionalLight color="white" position={[0, 0, 5]} />

      <group name="handList">
        {mainHandCards.map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[2, 4, 0]} scale={.6} name="out-list-1">
        {props.outCards[1].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[-2, 4, 0]} scale={.6} name="out-list-2">
        {props.outCards[2].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[0, 2, 0]} scale={.6} name="out-list-0">
        {props.outCards[0].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
    </>
  )
}

为了体现3D界面，添加一个轨道相机（滑动场景即可调整相机转角）

extend({ OrbitControls });

const CameraControls = () => {
  const {
    camera,
    gl: { domElement }
  } = useThree();
  camera.position.set(0, 0, 10);
  const controls = useRef();
  useFrame((state) => {
    (controls.current as unknown as OrbitControls).update()
  });
  return (
    // @ts-ignore
    <orbitControls
      ref={controls}
      args={[camera, domElement]}
      enableZoom={false}
      maxAzimuthAngle={Math.PI / 4}
      maxPolarAngle={Math.PI / 4}
      minAzimuthAngle={-Math.PI / 4}
      minPolarAngle={0}
      rotationSpeed={0.01}
    />
  );
};

场景完整代码：

//App.tsx
import { useEffect, useRef, useState } from "react";
import {
  Canvas,
  useFrame,
  extend,
  useThree,
} from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import "./App.css"
import Card from './component/Card';
import GameModel from "./base/src/game/model/GameModel";
import GameSceneMediator from "./base/src/game/view/GameSceneMediator";
import GameSceneView from "./component/GameSceneView";

extend({ OrbitControls });

const CameraControls = () => {
  const {
    camera,
    gl: { domElement }
  } = useThree();
  camera.position.set(0, 0, 10);
  const controls = useRef();
  useFrame((state) => {
    (controls.current as unknown as OrbitControls).update()
  });
  return (
    // @ts-ignore
    <orbitControls
      ref={controls}
      args={[camera, domElement]}
      enableZoom={false}
      maxAzimuthAngle={Math.PI / 4}
      maxPolarAngle={Math.PI / 4}
      minAzimuthAngle={-Math.PI / 4}
      minPolarAngle={0}
      rotationSpeed={0.01}
    />
  );
};

const R3fScene = (props: { mainHandCards: number[], gameModel, outCards: number[][] }) => {
  const {
    scene,
    camera,
  } = useThree();
  let mainHandCards = props.mainHandCards;
  let _gameModel = props.gameModel;
  _gameModel.context = scene;
  function getFaceTextureUrl(serial): string {
    let _prefix = "/faces/"
    let _readableName = _gameModel.getCardReadableName(serial);
    if (_readableName === "rJkr") return _prefix + "Poker_Joker_B.png"
    else if (_readableName === "bJkr") return _prefix + "Poker_Joker_R.png"
    else {
      let _suitDic = { 0: "D", 1: "C", 2: "H", 3: "S" };
      let _suitNumber: number = serial >> 4;
      return _prefix + "Poker_" + _suitDic[_suitNumber] + _readableName + ".png";
    }
  }

  let _cardCount = mainHandCards.length;
  let _beginX = -((_cardCount-1) * .5+1.5)/2 ;
  return (
    <>
      <CameraControls />
      <ambientLight intensity={0.1} />
      <directionalLight color="white" position={[0, 0, 5]} />

      <group name="handList">
        {mainHandCards.map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[2, 4, 0]} scale={.6} name="out-list-1">
        {props.outCards[1].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[-2, 4, 0]} scale={.6} name="out-list-2">
        {props.outCards[2].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
      <group position={[0, 2, 0]} scale={.6} name="out-list-0">
        {props.outCards[0].map((serial: number, idx) => {
          return (<Card key={"k" + serial} faceTextureUrl={getFaceTextureUrl(serial)} idx={idx} beginX={_beginX} serial={serial} />)
        })}
      </group>
    </>
  )
}

function App(props: any) {
  let _gameFacade = props.gameFacade;
  let _gameModel: GameModel = _gameFacade.retrieveProxy("GameModel");
  let [mainHandCards, setMainHandCards] = useState(_gameModel.cardsArr);
  let [outCards, setOutCards] = useState(_gameModel.outCards);
  _gameModel.setMainHandCardsHook(setMainHandCards);
  _gameModel.setOutCardsHook(setOutCards);

  useEffect(() => {
    if (_gameFacade.retrieveMediator("GameSceneMediator") == null) {
      _gameFacade.registerMediator(new GameSceneMediator(null, new GameSceneView()));
    }
  });

  return (
    <>
      <div id='canvas-container'>
        <Canvas orthographic camera={{ zoom: 50, position: [0, 0, 100], rotation: [0, 0, 0] }}>
          <R3fScene mainHandCards={mainHandCards} outCards={outCards} gameModel={_gameModel}></R3fScene>
        </Canvas>
      </div>

      <div id="status" style={{ display: 'fix', textAlign: 'center', fontSize: "2em", userSelect: "none" }}>hello</div>
      <div id='controlPanel-scores' className='controlPanel'>
        <button id='controlPanel-scores-1' className='controlButton'>1</button>
        <button id='controlPanel-scores-2' className='controlButton'>2</button>
        <button id='controlPanel-scores-3' className='controlButton'>3</button>
      </div>

      <div id='controlPanel-operation' className='controlPanel'>
        <button id='controlPanel-operation-pass' className='controlButton'>pass</button>
        <button id='controlPanel-operation-play' className='controlButton'>play</button>
      </div>
    </>
  );
}

export default App;

框架适配改动

• 获取场景节点

getViewComponent(name: string,isDOM:boolean = true,canvasScene:any = null) {
        if(isDOM) return document.getElementById(name);
        else {
            if(canvasScene) return canvasScene.getObjectByName(name);
        }
    }

通过传入three.js的场景对象，调用getObjectByName接口获取预先设置好name属性的节点

• 牌值获取card.userData（userData是R3F中自定义属性的装载对象，类似react中的data-yourAttribute, 在这里可以封装一个方法，让GameSceneMediator与牌取值解耦，使mediator的复用性更强）

private onOutCards_C2S() {
        this.hideControlPanel();
        let _outCardsSerial = [];
        let _cardsContainer = this.mViewClass.getViewComponent("handList",false,this.getGameModel().context);
        let _cards = _cardsContainer.children;
        for (let i = 0; i < _cards.length; i++) {
            let _card = _cards[i];
            if (this.mViewClass.isCardSelected(_card)) {
                _outCardsSerial.push(_card.userData["_d_cardSerial"]||_card["_d_cardSerial"] || _card.getAttribute("data-card-serial"));
            }
        }
        this.getNetFacade()?.sendNotification(card_game_pb.Cmd.PLAYCARDS_C2S, _outCardsSerial);
    }

• 节点坐标调整

由判断节点style 相应css属性的调整为节点position对象相应属性

isCardSelected(card) {
        return card.position.y == .2 ? true : false;
    }

查看本节相关代码 https://github.com/lizhiyu-me/Make-a-multiplayer-card-game/tree/episode7-r3f

export interface IGameSceneView {
    getViewComponent(name: string),
    getNewViewComponent(comp),
    getChild(childPath, parent),
    addClickListener(comp, handler, target),
    setCard(card, name),
    setLabel(labelComp, text),
    removeAllChildren(parent),
    addChild(child, parent),
    isCardSelected(card),
    toggleCardSelectedStatus(card),
    showComponent(comp),
    hideComponent(comp)
}

Compared with cocos creator, the implementation of react is more operable at the code level. The styles of interface elements are all implemented by handwritten code. The hot-reload that comes with create-react-app also responds to changes very quickly. There is a time to switch editors and wait for the editor to refresh, which is very lightweight.

Code reference https://github.com/lizhiyu-me/Make-a-multiplayer-card-game/tree/episode6-react

The next article mainly introduces the comparison between cocos creator and react implementation in development.

本节主要是用react实现UI视图。 在本节之前，已经用cocos creator实现了一个UI视图版本，为了重用基础框架，我们将游戏逻辑进行抽象，并将与视图引擎api相关的逻辑解耦出来。 下面是抽象出来的一个接口：

export interface IGameSceneView {
    getViewComponent(name: string),
    getNewViewComponent(comp),
    getChild(childPath, parent),
    addClickListener(comp, handler, target),
    setCard(card, name),
    setLabel(labelComp, text),
    removeAllChildren(parent),
    addChild(child, parent),
    isCardSelected(card),
    toggleCardSelectedStatus(card),
    showComponent(comp),
    hideComponent(comp)
}

相对于cocos creator，react的实现在代码层面可操作性较强，体现在界面元素的样式都通过手写代码来实现，create-react-app自带的hot-reload也非常快地反馈变更，不会有切换编辑器和等待编辑器刷新的时间，非常轻量的感觉。

代码参考 https://github.com/lizhiyu-me/Make-a-multiplayer-card-game/tree/episode6-react

下一篇主要介绍cocos creator 与 react 实现在开发上的对比。

According to the previous plan, I converted all the code written in JS to TS and transplanted the command-line interactive interface to the conventional game interactive interface (using cocos creator game engine).

Previously, in order to quickly realize the function, the server and client used only one file to encode. Up to now, the client code of the project has been modularized, and the classic PureMVC library has been introduced to completely decouple the UI interaction and data, network messages and game operation logic, so as to create conditions for extracting the code of the framework independent of the game engine (it is planned to use one framework to access different view layer engines).

PureMVC has been introduced in previous articles. The core idea is to decouple view and data. The data is processed by proxy and the facade is controlled by proxy.

Compared with the previous version, some changes are involved: -The difference between socket and web socket API. It mainly includes the names of several monitored events and the interfaces for sending messages. -UI display layer independent. Command line output and game engine rendering view interactive operation interface.

demo url

本章离前一章快一个月了，在这段时间，主要是对客户端的改造和重构，整体客户端的内容几乎完全不同于上一章命令行版本。

按照之前的计划，我将之前用js写的代码全部转为了ts，将命令行交互界面移植到常规的游戏交互界面（利用CocosCreator游戏引擎）。

之前为了快速实现功能，服务器和客户端分别只用一个文件进行编码。 截至目前，项目客户端代码进行了模块化改造，引入了经典的PureMVC库，将UI交互和数据，网络消息和游戏操作逻辑完全解藕，为后面提取与游戏引擎无关的框架（计划用一个框架接入不同视图层引擎）代码创造条件。

在之前的文章里面已经介绍过PureMVC，核心的思想就是视图与数据解藕。 通过一个门面类（Facade）来统管框架，用视图代理（Mediator）控制显示组件逻辑，用数据模型代理（Proxy）存储和处理数据。

相对于上一版，涉及到的一些改动：

• socket 和 web socket api 的区别。主要是几个监听的事件名字，和发送消息的接口。
• ui显示层独立。命令行输出和游戏引擎渲染视图交互操作界面。

demo url

Synergy give me the answer, it's awsome.

PureMVC will be included in next episode.

PureMVC is a framework for creating applications based upon the well-established model–view–controller (MVC) design pattern. The free, open source framework was originally implemented in the ActionScript 3 language for use with Adobe Flex, Flash and AIR, and it has since been ported to nearly all the major web development platforms.

Advantages and disadvantages of PureMVC:

• Advantages

• Use intermediaries, agents and commands to realize decoupling, which reduces the coupling among model, view and controller and improves the reuse of some codes

• The view interface can be reused

• Model data can be reused

• Disadvantages

• Code redundancy is large. For simple functions, you have to create view, mediator, command, facade, proxy and model scripts

• The operation process is a cumbersome process, and the code in mediator will appear complex and difficult to understand, unless you are familiar with the implementation principle of PureMVC

• PureMVC features

• The notice shall be delivered through the operation of packing and unpacking
• The command / notification is implemented in the observer mode. The command / notification uses the reflection acquisition method in the observer and is executed
• No service (this module for network communication can be added according to the structure of MVC)
• Data is transmitted through notification. Sendnotification has only one object type parameter. It will feel that the data transmission is limited. You can combine the data into a type / structure for transmission, or expand another parameter for notification.