竞争对手仅凭旧款处理器和3款新发布的35W移动处理器“作战”时，基于7nm和Zen 3架构的AMD锐龙5000系列移动处理器显然有着莫大的优势，所以今年游戏本厂商纷纷第一时间推出了众多搭载AMD锐龙5000系列移动处理器的新品。比如Acer就在CES 2021展会上推出了一款锐龙游戏本——Acer暗影骑士·龙。Acer暗影骑士系列产品主打主流市场，那么在全新锐龙处理器的加持下，Acer暗影骑士·龙的表现如何呢？

• 产品参数
• 操作系统：Windows 10家庭中文版（64位）
• 显示屏：15.6英寸IPS屏（1920×1080、144Hz）
• 处理器：AMD锐龙7 5800H（8核16线程，3.2GHz~4.4GHz）
• 内存：海力士16GB DDR4 3200双通道（8GB×2）
• 硬盘：西数SN530 512GB NVMe SSD
• GPU：NVIDIA GeForce RTX 3060 Laptop GPU（6GB GDDR6，最高85W）
• 电池：57Wh
• 尺寸：363.4mm（长）×255mm（宽）×23.9mm（厚）
• 重量：2.2kg（不含电源）
• 参考售价：7499元

龙纹竞技外观

作为Acer暗影骑士家族中的新成员，暗影骑士·龙的整体设计风格延续了家族血脉，虽然机身外壳没有采用金属材质，但高强度的复合塑料材质再加上“星芒黑”的机身配色同样让其拥有不错的手感和质感。暗影骑士·龙的A面设计独特，边角辅以多边形造型，A面中间的Logo双侧则配以雷纹线条，看上去就像是龙的两根触须，战力十足。稍显遗憾的是，A面的Logo和双侧的雷纹线条都不支持任何灯效，如果加入灯效的话，相信会进一步提升这台机器的外在吸引力。

另外，暗影骑士·龙的尾翼（散热孔）不仅采用了夸张的造型，还单独加入了一小块红色的背板，和整机的“星芒黑”配色形成鲜明对比，这种多现于游戏本上的经典红黑配色带来了强烈的竞技风格，符合暗影骑士·龙本身的定位。

掀开顶盖，可以看到暗影骑士·龙的B面采用了一块15.6英寸1080p分辨率的IPS雾面屏，这块屏幕没有采用窄边框设计，不过屏幕左右两侧以及上下边框处加入了防震橡胶垫，能够防止在搬运过程中损坏屏幕。

暗影骑士·龙拥有出色的屏幕素质，首先这块屏幕的供应商是LG Display，其次屏幕的灰阶响应时间低至3ms，同时还拥有高色域，能够带来出色的显示效果和色彩表现。我们通过Datacolor Spyder5 Pro进行实测，其屏幕的sRGB色域覆盖面积为98%，AdobeRGB色域覆盖面积为74%，DCI-P3色域覆盖面积为74%。也就是说无论玩游戏还是看电影、做设计，这台机器的屏幕都能较好地满足要求。暗影骑士·龙的屏幕还拥有144Hz高刷新率，对于FPS竞技类游戏来说，144Hz高刷新率屏幕可以让游戏画面更流畅和平滑，玩家能更加精确地瞄准目标，同时也能避免出现画面撕裂、卡顿、操作延迟等现象。

四区域RGB背光键盘

暗影骑士·龙配备全尺寸键帽的键盘，按键手感较软，游戏、打字等操作比较舒适。同时，这台机器的键盘还支持四个区域的RGB背光，玩家可以通过内置软件自行调整键盘的背光，Acer也在控制软件中内置了“呼吸”“波形”“缩放”“切换”“霓虹”等灯效。

作为一台游戏本，暗影骑士·龙的键盘也针对游戏玩家做了不少优化，比如在15.6英寸的机身中保留了数字小键盘，键盘右下方的方向键也采用的是全尺寸键帽设计，空格键也做了加宽处理，让玩家使用起来更加方便。

接口方面，暗影骑士·龙的电源接口设计在机身背部（自带180W电源适配器），避免了电源线和其他外接线缆的缠绕。其他的主要外接接口则设计在机身左右两侧，这台机器的左侧配备一个安全锁、一个RJ-45网线接口、两个USB 3.2 Gen2 Type-A接口、一个3.5mm音频接口；右侧则配备一个HDMI接口、一个USB 3.2 Gen2 Type-A接口以及一个USB-C接口，这样的接口配置能够满足大多数玩家的使用需求。

搭载AMD锐龙7 5800H处理器

我们测试的这台机器搭载最新的AMD锐龙7 5800H处理器，作为AMD锐龙5000系列移动处理器家族中的“明星”成员，AMD锐龙7 5800H基于7nm生产工艺，处理器架构升级为最新的Zen 3，拥有8核心16线程，基础频率提升到3.2GHz，最大加速频率可达4.4GHz，最大缓存为16MB，默认TDP为45W，标称最大功耗可达54W，同时内置AMD Radeon Graphics显卡。

与AMD锐龙7 5800H处理器搭配的还有海力士16GB DDR4 3200MHz双通道内存、西数SN530 512GB NVMe SSD以及NVIDIA GeForce RTX 3060 Laptop GPU。16GB双通道高频内存拥有良好的带宽，能够为整机强悍的性能助力，而西数SN530 512GB NVMe SSD不仅拥有较大的容量，可满足玩家的储存要求，还拥有出色的读写速度——在AS SSD Benchmark测试中（1GB测试数据）连续写入速度达到1749.99MB/s，连续读取速度达到2251.85MB/s，总分得到3144分。

对于RTX 3060 Laptop GPU，则更不用多说，其采用NVIDIA Ampere架构，拥有3840个CUDA核心，支持光线追踪和DLSS。暗影骑士·龙搭载的RTX 3060 Laptop GPU采用6GB GDDR6显存（三星颗粒），最高功耗为85W，通过GPU-Z软件可以看到其默认频率为900MHz，Boost频率为1425MHz。

值得一提的是，拆开机器后盖后我们发现暗影骑士·龙还拥有强悍的扩展能力。这台机器内部采用双风扇、三热管设计，主板上预留了双内存扩展插槽、双M.2扩展插槽以及一个2.5英寸硬盘位。也就是说，玩家不仅能够扩展内存，还能对硬盘扩容，最高可同时安装三块硬盘，带来充足的存储空间。

性能实测

在甜点级的硬件配置下，暗影骑士·龙的实际性能如何呢？我们在控制中心软件中将机器风扇速度设置为最大，然后通过一系列测试软件和游戏来一探究竟。

首先在处理器渲染性能测试软件CINEBENCH R20中，暗影骑士·龙得到单线程551pts、多线程4653pts的成绩。和同为8核心16线程的酷睿i7-10875H处理器相比，暗影骑士·龙搭载的锐龙7 5800H处理器在CINEBENCH R20的单线程测试中依然领先大约17%，多线程方面则领先大约35%。

除了CINEBENCH R20，我们也用Blender做了处理器实际渲染应用测试。在Blender 2.80的BMW27测试场景中，暗影骑士·龙完成渲染任务仅耗时201秒，而搭载酷睿i7-10870H处理器的机型需要291秒，搭载酷睿i7-11375H处理器的机型则需要331秒。

可见在7nm生产工艺和Zen 3处理器架构的加持下，AMD锐龙7 5800H处理器确实拥有强悍的单核和多核性能，甚至远超竞争对手的同类产品。实际上强悍的处理器性能不仅能大幅提升游戏本整机综合性能，对于提高游戏fps也大有裨益。

Acer暗影骑士·龙的图形性能如何呢？首先从3DMark软件的测试成绩来看，这台机器在最大速度的风扇转速下，其搭载的RTX 3060 Laptop GPU（85W）远超RTX 2060移动版显卡，略超RTX 2070 Max-Q显卡。比如在基于1080p分辨率的Fire Strike场景中，这台机器得到18940的显卡分数，领先RTX 2060移动版大约13%，与130W的RTX 3060 Laptop GPU相比也仅有大约14%的差距。在基于DX12的3DMark Time Spy测试场景中，这台机器得到分7561的显卡分数，领先RTX 2060移动版显卡大约29%。

凭借着出色的图形表现，暗影骑士·龙能够在1080p分辨率下以游戏预设的“最高画质”畅玩目前热门的游戏，而且游戏平均帧率能轻松保持在60fps及以上。比如在《古墓丽影：暗影》1080p、“最高画质”（RT关，DLSS关）中，这台机器取得平均90fps的成绩，；在《无主之地3》1080p、“恶棍画质”中也取得61.85fps的平均帧率。对于目前火热的《赛博朋克2077》，在1080p分辨率和游戏预设的“光线追踪：超级”设置下，暗影骑士·龙取得平均45.94fps的成绩，游戏画面基本流畅，而将游戏画质调整为“高画质”并开启“DLSS自动”后，RTX 30系Laptop GPU展现了DLSS技术的强大，游戏平均帧率提升到72.59fps（同画质下关闭DLSS后平均成绩为63.53fps），此时游戏画面十分流畅。

散热测试

Acer暗影骑士·龙采用双风扇、三铜管、四出风口设计，并配备CoolBoost风扇增压系统，可提升风扇转速，那么它在高负载下的散热表现如何呢？在24.2℃环境，我们通过AIDA64和Furmark软件对这台机器进行处理器和GPU双烤测试。

烤机30分钟以后通过FLIR红外热成像仪观察到这台机器正面最高温度为54.4℃，位于C面键盘中央的顶部区域，在热成像图上我们能够明显看到键盘左右两侧的两个风扇低温区域，键盘WASD区域和数字小键盘区域的温度保持在31℃～33.9℃左右，十分清凉。键盘其他大部分区域的温度保持在40℃左右，仅右下侧位置的温度略高，同时腕托位置的温度保持在29℃左右，因为C面外壳采用的是塑料材质，所以在高负载下C面大部分区域摸上去没有过热的感觉。

总结

Acer暗影骑士·龙拥有充满电竞气息的外观设计，键盘支持四区域的RGB背光，并针对游戏玩家做了一系列优化。屏幕也是这台机器的一大亮点，144Hz高刷新率和98% sRGB高色域能够满足多数玩家对屏幕素质的要求。另外，Acer暗影骑士·龙还拥有包括AMD锐龙7 5800H处理器、RTX 3060 Laptop GPU、16GB双通道内存和512GB SSD等核心硬件，性能强悍，可轻松应对热门3A游戏。别忘了它还支持扩展硬盘和内存。Acer暗影骑士·龙的价格近期低至7499元（关键是现货！），确实是一台性价比颇高的高性能游戏本。购买链接：https://item.jd.com/100010286615.html#crumb-wrap 如果大家近期想入手Acer暗影骑士·龙，可通过以上链接查看购买。

. 案例预览

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

在线查看：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