<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[yichen454的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/yichen454</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; yichen454]]></copyright><item><title><![CDATA[npm 7 install问题]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/115618080</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/115618080</guid><author>yichen454</author><pubDate>Mon, 12 Apr 2021 12:52:27 +0800</pubDate><description><![CDATA[ERESOLVE与npm@7有关的问题很常见，因为npm7.x对某些事情比npm6.x更严格。通常，最简单的解决方法是将–legacy-peer-deps标志传递给npm(e.g.，npm i --legacy-peer-deps），或者直接降低npm版本.

]]></description><category></category></item><item><title><![CDATA[ThreeJS后处理扫描效果]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/114306344</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/114306344</guid><author>yichen454</author><pubDate>Wed, 03 Mar 2021 12:06:44 +0800</pubDate><description><![CDATA[通过深度纹理在着色器中计算世界坐标，进行相应的后处理操作，避免的需要进行扫描效果绘制是对每个物体的材质改变
原理参考unity中制作方法

演示地址点我


]]></description><category></category></item><item><title><![CDATA[ThreeJS+人脸关键点美妆玩法]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/112723519</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/112723519</guid><author>yichen454</author><pubDate>Sat, 16 Jan 2021 19:48:22 +0800</pubDate><description><![CDATA[随着人工智能的迅猛发展，市场上的AR应用及玩法层出不穷。web端流量代表淘宝、微信小程序中也新增了不少AR类接口。此处将常见的美妆型玩法从手机应用进行了一次web端的移植：

人脸关键点采用face++的数据源
不采用canvas而使用webgl绘制效率完全能达到实时效果（淘宝小程序就提供实时人脸接口)
普通H5实时可行但是局限性太大像IOS只有safari支持webRTC,不过静态方式也是不错的选择

图示
演示链接
点我

...]]></description><category></category></item><item><title><![CDATA[常见建模软件导出gltf]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/112255509</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/112255509</guid><author>yichen454</author><pubDate>Wed, 06 Jan 2021 00:20:18 +0800</pubDate><description><![CDATA[3D MAX
插件安装：
下载地址自行选择对应MAX版本插件压缩包，在电脑上解压插件文件，并打开与3ds Max版本对应的目录。最后，确保3ds Max未运行，并将所有.dll文件移动到3ds Max（软件安装目录/bin/assemblies）的安装目录中。下次启动3ds Max时，插件将自动启动，并显示一个新选项卡。
glTF导出（PBR材质）


打开英文版3ds Max（2017及其以上），新建或将以前的材质修改为物理材质（Physical Matical）;


对物理材质部分选项进行设置；注意：]]></description><category></category></item><item><title><![CDATA[ThreeJS中outlinePass的色差问题]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/112246520</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/112246520</guid><author>yichen454</author><pubDate>Tue, 05 Jan 2021 17:26:44 +0800</pubDate><description><![CDATA[在threejs官方实例中outlinePass的应用里renderer使用的是默认的颜色空间，其渲染我们发现是未造成色差。然而，通常我们会采取gamma矫正来渲染光线敏感型场景，从而使用一些其他的颜色空间，这样直接使用outlinePass勾勒轮廓会使整体场景颜色变暗（产生色差），而且这个问题在大部分Pass中均会出现，侵入性较低的改法为将outlinePass的源码提出，在其中的render方法下修改代码块如下图所示：

		if ( this.renderToScreen ) {

			this..]]></description><category></category></item><item><title><![CDATA[移动端浏览器IOS13以上，陀螺仪调用注意事项]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/112210138</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/112210138</guid><author>yichen454</author><pubDate>Mon, 04 Jan 2021 23:33:49 +0800</pubDate><description><![CDATA[移动端iOS更新到13版本以后 许多全景图等场景陀螺仪失效解决方案如下：

需要HTTPS协议
隐私设置开启运动传感器
监听事件代码调整，iOS13以后会新增window.DeviceOrientationEvent的API，orientationchange的事件用于处理横竖屏转换，没用到可忽略。要额外注意的是其触发条件与音视频自动播放的安全协议相同，需要用户交互事件的主动触发例如点击事件之后。监听添加代码如下：

		// iOS 13+

		if ( window.DeviceOrientation]]></description><category></category></item><item><title><![CDATA[ThreeJS-geoJson-开发记录]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/112062089</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/112062089</guid><author>yichen454</author><pubDate>Fri, 01 Jan 2021 17:41:29 +0800</pubDate><description><![CDATA[使用墨卡托投影将geoJson经纬度数据转为平面坐标数据，进而使用threejs ExtrudeGeometry生成所示地图三维模型
主要技术点

三维渲染 threejs
数据转换 d3-geo 变换代码

const projection = geoMercator().center([104.0, 37.5]).scale(36).translate([0, 0]);

center: 中心经纬度
scale: 转换后坐标缩放系数
translate：转换后平移量
功能点

简单光效
自主材质调节（演]]></description><category></category></item><item><title><![CDATA[游戏美术基础：游戏贴图]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111924585</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111924585</guid><author>yichen454</author><pubDate>Tue, 29 Dec 2020 16:10:01 +0800</pubDate><description><![CDATA[一、贴图的作用：
贴图的作用是描述物体表面的材质，我们创作出的纹理与材质在游戏引擎（虚拟世界）中与光交互。
二、颜色贴图
颜色贴图有三种叫法：Base Color Map， Albedo Map， Diffuse Map，因为工作流不同，所以叫法不一样，而且本质上也有区别
Diffuse map漫反射贴图
光照模型在Lambertian（兰伯特材质球）着色器中会把颜色贴图叫做Diffuse Map（也叫颜色贴图），通常在绘制这张Diffuse Map的时候会把物体的结构阴影信息也绘制进去。在传统工作流中，D]]></description><category></category></item><item><title><![CDATA[ThreeJS车辆简单渲染及控制系统]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111877397</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111877397</guid><author>yichen454</author><pubDate>Mon, 28 Dec 2020 23:34:27 +0800</pubDate><description><![CDATA[简单的PBR应用，该例子仅有简单全局光，多依赖环境光，优化金属光泽及车漆效果。并带有控制遥杆进行运动控制

体验地址：
点我

]]></description><category></category></item><item><title><![CDATA[H5 判断页面是否处于前台]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111825075</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111825075</guid><author>yichen454</author><pubDate>Sun, 27 Dec 2020 19:49:28 +0800</pubDate><description><![CDATA[平时制作H5互动时会有页面切出去需要关闭音乐或者暂停进度的需求，此段代码可用于浏览器页面是否处于前台的判断。此处用了数组承载监听事件是为了多个组件使用的情况，可自行封装成订阅或注册模式。
源码如下：
window.pageShowCbList = [];
window.pageHideCbList = [];

window.onload = () =&gt; {
    pageShowOrHide(
        () =&gt; {
            for (var i = 0; i &lt]]></description><category></category></item><item><title><![CDATA[使用宝塔面板建立FTP时无法连接问题]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111768985</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111768985</guid><author>yichen454</author><pubDate>Sat, 26 Dec 2020 20:42:41 +0800</pubDate><description><![CDATA[明明FTP建立成功了为何连接不上呢？
多半是因为防火墙端口限制问题如下图：

该图时宝塔面板创建FTP时自动更改的防火墙设定，同时我们要将同样的端口在我们服务器的某某云内的防火墙设置内打开，尤其注意被动模式的端口开启，这个往往会被忽略。

...]]></description><category></category></item><item><title><![CDATA[宝塔面板网站上传成功文件内无显示问题]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111768976</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111768976</guid><author>yichen454</author><pubDate>Sat, 26 Dec 2020 20:41:42 +0800</pubDate><description><![CDATA[在刚安装完宝塔面板并用其建站时有时会出现文件系统无显示问题，处理方式很简单如下：

等修复完成问题得到解决

]]></description><category></category></item><item><title><![CDATA[python3图片横向拼接（雪碧图制作）]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111768947</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111768947</guid><author>yichen454</author><pubDate>Sat, 26 Dec 2020 20:39:54 +0800</pubDate><description><![CDATA[使用python快速将序列图集转为雪碧图
注意事项：

图片输出输出格式
部分经过压缩软件压缩的图片合成后回损失透明通道，尽量使用原图合并

源码如下：
from os import listdir
from PIL import Image

path = 'xxxxx'//目录地址
dirs = listdir(path)

ims = [Image.open(('%s/%s' % (path, fn))) for fn in sorted(dirs) if fn.endswith('.jpg')]

]]></description><category></category></item><item><title><![CDATA[H5 canvas制作数字连线效果]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111768002</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111768002</guid><author>yichen454</author><pubDate>Sat, 26 Dec 2020 19:11:13 +0800</pubDate><description><![CDATA[小时候都玩过数字连线画册，这里我们用canvas将它实现
逻辑要点：

canvas无法进行回撤操作，即每一步都需要完整的重新绘制
为了体验更好此处做了一个简单的矩形范围吸附效果，完善可以更改成圆形范围

演示链接：
点我
源码如下：
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;小互动-数字连线&lt;/title&gt;
    &lt;meta nam]]></description><category></category></item><item><title><![CDATA[H5 canvas制作刮刮卡效果并计算清理结果]]></title><link>https://blog.youkuaiyun.com/yichen454/article/details/111757330</link><guid>https://blog.youkuaiyun.com/yichen454/article/details/111757330</guid><author>yichen454</author><pubDate>Sat, 26 Dec 2020 16:50:45 +0800</pubDate><description><![CDATA[简要步骤如下
1.绘制底图 载体任意DOM CANVAS 图片皆可
2.canvas绘制交互区域 纯色或图片皆可
3.设定混合模式 “destination-out” 关键
4.根据交互情况绘制清理区域
计算绘制结果
1.原理：检测canvas绘制结果像素点的透明度情况
2.要点：像素过多的情况不必每个像素都对应检测 耗时过大 可自行设计采样方式
演示链接：
https://www.easonyi.com/demo/scratchcards.html
源码如下：

&lt;!DOCTYPE html&gt;]]></description><category></category></item></channel></rss>