百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

游戏编程 | THREE.JS实现游戏操作界面

yuyutoo 2024-10-27 17:02 4 浏览 0 评论

1. 案例预览


此案例实现了人物跟随着移动操作杆进行移动并执行跑步动作,右边的攻击按钮可以实现攻击,短时间内连按可以实现不同的攻击动作。

在线查看:https://jxtreehouse.github.io/three.js-lessions/%E6%95%99%E7%A8%8B/examples/12_game_operation.html

源码仓库: https://github.com/JXtreehouse/three.js-lessions/blob/gh-pages/%E6%95%99%E7%A8%8B/examples/12_game_operation.html

2. 场景的搭建

首先,我们需要把舞台搭建出来,先创建scene场景:

2.1 创建scene

我们创建了场景,并设置了场景一个灰色的背景色。还设置了场景的雾化效果,这个雾的效果主要是针对于场景的相机的距离实现的,三个值分别是雾的颜色、雾的开始距离、完全雾化距离相机的位置。

2.2 创建camera

我们创建了一个与地面呈45度角并朝向原点的相机:

2.3 创建灯光

我们创建了两个灯光:

  • 照射全局的环境光 THREE.AmbientLight
  • 可以产生阴影的平衡光 THREE.DirectionalLight

2.4 创建草地

我们使用平面几何体创建了一个贴有草皮贴图的材质的模型:

到这里,场景、灯光、相机、舞台都已经备齐。接下来我们将请出我们主角naruto登场。

3 人物模型和动画

3.1 添加人物模型

首先我们将模型导入到场景内,注意,案例中的模型比较大,加载和处理需要一定的时间,请小伙伴们耐心等待即可(实际案例里面可以加个loading动画):

var loader = new THREE.FBXLoader();
        loader.load("../js/models/fbx/Naruto.fbx", function (mesh) {
            scene.add(mesh);
        });

我们不单单只是将模型添加到场景,还对模型的阴影和位置做了一下调整:

调整模型的位置,站立在草地上面

设置灯光一直照射模型:


3.2 添加动画

这个模型里面含有27个骨骼动画,我们可以通过设置不同的动画,来实现一整套的动作来实现相应的比如攻击效果,移动效果等。接下来我们通过模型的数据生成一下所需的动画:

模型加载成功后,我们需要让模型执行一个普通的站立效果:

3.3 添加操作

我们主要添加了两种操作:模型位置移动操作和攻击效果。

操作按钮为了方便,直接使用的dom标签模拟出来的。 模型位置移动操作中,我们需要模型的位置的变动和模型的朝向以及修改站立动画和奔跑动画的切换。 攻击效果则是实现攻击并且根据点击速度实现一整套的攻击动作切换。

3.3.1实现位置移动效果

在实现位置移动效果中,我们为按钮绑定了三个事件:鼠标按下,鼠标移动,鼠标抬起。 在鼠标按下时,我们获取到了当前操作圆盘的中心点的位置,让模型进入跑步动画,绑定了鼠标的移动和抬起事件。重要的是更新模型的移动方向和移动速度。


上面的dop类是封装的一个兼容多端的事件库,github地址: https://github.com/johnson2heng/dop 在鼠标移动回调事件中,我们更新模型的移动方向和移动速度。

function move(event) {
    getRadian(event);
}

最后在鼠标抬起事件中,我们解绑事件,将按键复原,并停止掉模型的移动状态,将模型动画恢复到站立状态。

function up() {
    doc.remove("move", move);
    doc.remove("up", up);

    //按钮复原
    bar.style.marginTop = 0;
    barWrap.style.transform = `translate(-50%, -50%) rotate(0deg)`;
    bar.style.transform = `translate(-50%, -50%) rotate(0deg)`;

    //设置移动距离为零
    characterMove(new THREE.Vector2(), 0);

    //鼠标抬起切换站立状态
    state.skills === 0 && gui["action" + 24]();
}

三个事件绑定完成后,我们需要将在回调中获得的值求出当前的偏转方向和移动速度: 首先我们获取一下当前鼠标的位置:

if (media === "pc") {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
}
else {
    mouse.x = event.touches[0].clientX;
    mouse.y = event.touches[0].clientY;
}

根据位置求出距离操作圆盘中心的位置,并保证最大值也不会超出圆盘的半径:

let distance = center.distanceTo(mouse);
distance >= parseFloat(dop.getFinalStyle(control, "width")) / 2 && (distance = parseFloat(dop.getFinalStyle(control, "width")) / 2);

计算出来当前位置和中心的夹角,并修改dom的位置:


//计算两点之间的夹角
mouse.x = mouse.x - center.x;
mouse.y = mouse.y - center.y;

//修改操作杆的css样式
bar.style.marginTop = `-${distance}px`;
bar.style.transform = `translate(-50%, -50%) rotate(-${(mouse.angle() / Math.PI * 180 + 90) % 360}deg)`;
barWrap.style.transform = `translate(-50%, -50%) rotate(${(mouse.angle() / Math.PI * 180 + 90) % 360}deg)`;

函数的最后,则调用的characterMove方法,将按钮数据转换成为模型实际需要移动的距离。

//修改当前的移动方向和移动速度
characterMove(mouse.normalize(), distance / (parseFloat(dop.getFinalStyle(control, "width")) / 2));

接下来我们查看一下characterMove方法,在这个方法中,我们计算出了模型每一帧需要移动的距离。这里有一个问题,我们所谓的操作杆向前让模型移动前方,其实是相机朝向的前方。所以我们需要先求出相机的前方矢量,再通过相机的前方矢量为基础,计算出来模型实际方向。 我们首先声明了两个变量,一个是旋转矩阵,另一个是移动矢量:

let direction = new THREE.Matrix4(); //当前移动的旋转矩阵
let move = new THREE.Vector3(); //当前位置移动的距离

在characterMove函数内,我们根据相机的四元数获得了旋转矩阵:

/重置矩阵
direction.identity();

//通过相机的四元数获取到相机的旋转矩阵
let quaternion = camera.quaternion;
direction.makeRotationFromQuaternion(quaternion);

然后通过旋转矩阵和当前的操作杆的方向通过相乘计算出来实际模型移动的方向:


//获取到操作杆的移动方向
move.x = vector.x;
move.y = 0;
move.z = vector.y;

//通过相机方向和操作杆获得最终角色的移动方向
move.applyMatrix4(direction);
move.normalize();

最后,通过比例和方向得出当前模型每一帧移动的距离,因为我们不需要修改模型y轴,所以实际上也只是修改两个轴的位置:

move.x = move.x * ratio * 10;
move.z = move.z * ratio * 10;

我们获取到了模型的每一帧移动的距离,还需要在帧循环中调用:

//如果模型添加成功,则每帧都移动角色位置
if (naruto) {
    //获取当前位置
    position.x += move.x;
    position.z += move.z;

    //修改模型位置
    naruto.position.x = position.x;
    naruto.position.z = position.z;

    //修改平衡光的位置
    light.position.x = position.x;
    light.position.z = position.z + 100;

    //修改相机位置
    camera.position.x = position.x;
    camera.position.z = position.z - 800;
}


当前的模型,灯光,和相机都会跟随移动,实现了,我们上面动图中的模型移动的效果。

3.3.2 实现攻击效果

在实现攻击效果时,我没有只是简单的实现一个普通的攻击,而是直接实现一套连招。 这一套连招是通过五个动作组成,在执行一个攻击动画时如果再次点击了攻击按钮,执行完这个攻击动画将不会切换到站立动画,而是直接切换到连招的下一个攻击动画中。 只要连续点按攻击按钮,模型将完成一整套的动作。实现这个效果,我们只是使用了一个简单的定时器即可实现,接下来我们通过代码了解一下实现过程。

在实现动画前,先设置一个连招的数组,将需要的动作添加到数组当中。我这里添加了五个手部攻击的效果:

let attackList = [12, 13, 14, 15, 16]; //连招的循序
let attackCombo = false; //是否连招,接下一个攻击

我们还设置了attackCombo设置当前是否可以连招的变量,这个变量state.skills值不为0时,将变为true。定时器每一次更新的时候,将判断attackCombo是否为true,在为true的状态下,将执行连招的下一个动作。否则,将停止连招。

//attackIndex 等于0,当前不处于攻击状态  不等于,当前处于攻击状态
if(state.skills === 0){
    state.skills++;
    gui["action" + attackList[state.skills-1]]();
    attackInterval = setInterval(function () {
        if(attackCombo){
            //如果设置了连招,上一个攻击动作完成后,进行下一个攻击动作
            state.skills++;
            //如果整套攻击动作已经执行完成,则清除定时器
            if(state.skills-1 >= attackList.length){
                closeAttack();
                return;
            }

            //进行下一个动作
            gui["action" + attackList[state.skills-1]]();

            attackCombo = false;
        }
        else{
            closeAttack();
        }
    }, naruto.animations[attackList[state.skills-1]].duration*1000);
}
else{
    attackCombo = true;
}

在关闭掉攻击动画的函数内,我们首先将state.skills设置为0,然后恢复到移动或者站立动画,最后清除掉定时器:


//关闭攻击状态
function closeAttack() {
    state.skills = 0;
    //根据状态设置是移动状态还是站立状态
    state.move ? gui["action" + 3]() :gui["action" + 24](); //回到站立状态
    clearInterval(attackInterval);
}

通过很简单的一些代码,我们就实现了一个复杂的连招效果。是不是很有成就感,这就是在最前面看到的那个操作gif的效果的案例

插件

  • OrbitControls.js: 允许我们使用鼠标或触摸屏浏览操作3D场景

API详解

Scene.fog

开发Web3D应用有时候需要实现一个雾化的效果,简单说就是场景中越远的位置看起来越模糊,Three.js引擎提供了两个雾Fog和指数雾FogExp2两个类。

Three.js场景对象Scene具有一个雾化属性.fog,该属性的属性值是雾对象Fog或指数雾对象FogExp2。如果你想模拟一个雾化效果只需要在threejs代码中设置场景对象的.fog属性就可以。

Fog类定义的是线性雾,雾的密度是随着距离线性增大的,即场景中物体雾化效果随着随距离线性变化。

构造函数雾Fog(color,near,far)的三个参数分别对应雾对象Fog的三个属性.color、.near和.far。

.color属性表示雾的颜色,比如设置为红色,场景中远处物体为黑色,场景中最近处距离物体是自身颜色,最远和最近之间的物体颜色是物体本身颜色和雾颜色的混合效果。

// 改变雾的颜色为白色
scene.fog.color.set(0xffffff)

.near属性值表示应用雾化效果的最小距离,距离活动摄像机长度小于.near的物体将不会被雾所影响

.far属性值表示应用雾化效果的最大距离,距离活动摄像机长度大于.far的物体将不会被雾所影响

PerspectiveCamera(透视相机)

透视投影照相机(Perspective Camera)的构造函数是:

THREE.PerspectiveCamera(fov, aspect, near, far)

透视图中,灰色的部分是视景体,是可能被渲染的物体所在的区域。fov是视景体竖直方向上的张角(是角度制而非弧度制),如侧视图所示。

aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为Canvas的横纵比例。

near和far分别是照相机到视景体最近、最远的距离,均为正值,且far应大于near。

AmbientLight

环境光是指场景整体的光照效果,是由于场景内若干光源的多次反射形成的亮度一致的效果,通常用来为整个场景指定一个基础亮度。因此,环境光没有明确的光源位置,在各处形成的亮度也是一致的。

在设置环境光时,只需要指定光的颜色:

THREE.AmbientLight(hex)

其中,hex是十六进制的RGB颜色信息,如红色表示为0xff0000。

创建环境光并将其添加到场景中的完整做法是:

var light = new THREE.AmbientLight(0xffffff);
scene.add(light);

如果此时场景中没有物体,只添加了这个环境光,那么渲染的结果仍然是一片黑

环境光通常使用白色或者灰色,作为整体光照的基础。

##TextureLoader

通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图.map属性的值。

材质的颜色贴图属性.map设置后,模型会从纹理贴图上采集像素值,这时候一般来说不需要在设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色贴图的颜色值RGB。

THREE.FBXLoader()

three.js有官方的fbx插件,可以直接将模型加载至网页,并且支持动画数据,代码量也是最少的。 但是,该格式存在很大弊端:插件对文件格式的规范很严格,换言之,插件支持性不太好。从网上下载的fbx动画,十有八九会加载失败。

首先需要引入FBXLoader.js插件,如果报错 “Error: THREE.FBXLoader: External library Inflate.min.js required, obtain or import from https://github.com/imaya/zlib.js”,则还需引入inflate.min.js文件。

我们可以看一个简单案例

https://wow.techbrood.com/fiddle/55419

参考

The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js : 使用three.js设计游戏的学习心得与知识分享

Three.js Making a Game

16 Three.js 游戏操作案例

Joystick, gamepad or 3D mouse support in Three.js

yoannmoinet/nipplejs

https://css-tricks.com/how-to-make-a-smartphone-controlled-3d-web-game/

ADDING SUPPORT FOR VR INPUTS WITH WEBXR AND THREE.JS

相关推荐

野路子科技!2步教你把手机改造成一个FTP服务器,支持PC互传

哈喽,大家好,我是野路子科技,今天来给大家带来一个教程,希望大家喜欢。正如标题所言,就是教大家如何把售价改造成FTP服务器,而这个时候估计有朋友会问了,把手机改造成FTP服务器有什么用呢?现在有Q...

不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用

我先前的作品中,有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频,而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...

Qt三种方式实现FTP上传功能_qt引入qftp库

FTP协议FTP的中文名称是“文件传输协议”,是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一,其传输效率非常高,在网络上传输大的文件时,经...

Filezilla文件服务器搭建及客户端的使用

FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...

美能达柯美/震旦复印机FTP扫描怎么设置?

好多网友不知道怎么安装美能达/震旦复印机扫描,用得最多是SMB和FTP扫描,相对于SMB来说,FTP扫描安装步骤更为便捷,不容易出问题,不需要设置文件夹共享,所以小编推荐FTP来扫描以美能达机器为例详...

CCD(简易FTP服务器软件)_简单ftp服务器软件

CCD简易FTP服务器软件是一款很方便的FPT搭建工具,可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单,只要运行软件就会自动生效,下载银行有该资源。该工具是不提供操作界面的,其他用户可以输...

Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器

在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法,适合需要进行大量文件交换的场景。以下是一步步指导,帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...

理光FTP扫描设置教程_理光ftp扫描设置方法

此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题,由于旧的SMB协议存在安全漏洞,所以微软在新的系统,WIN8/WIN10/SERVER201220162018里使用了新的SMB传...

纯小白如何利用wireshark学习网络技术

写在前面工欲善其事必先利其器!熟悉掌握一种神器对以后的工作必然是有帮助的,下面我将从简单的描述Wireshark的使用和自己思考去写,若有错误或不足还请批评指正。...

京东买13盘位32GB内存NAS:NAS系统安装设置教程

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:yasden你没有看错,我在京东自营商城购买硬件,组装了一台13盘位,32GB内存的NAS,硬盘有13个盘位!CPU是AMD的5500!本文...

FileZilla搭建FTP服务器图解教程_filezilla server搭建ftp服务器

...

python教程之FTP相关操作_python ftps

ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2,显示详细信息ftp.connect(“I...

xftp怎么用,xftp怎么用,具体使用方法

Xftp是一款界面化的ftp传输工具,用起来方便简单,这里为大家分享下Xftp怎么使用?希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...

树莓派文件上传和下载,详细步骤设置FTP服务器

在本指南中,详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写,只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法,你可以用...

win10电脑操作系统,怎么设置FTP?windows10系统设置FTP操作方法

打印,打印,扫描的日常操作是每一个办公工作人员的必需专业技能,要应用FTP作用扫描文件到电脑上,最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行,但人们还可以应用Windows的系...

取消回复欢迎 发表评论: