Write the Code. Change the World.

5月 30

百度小程序第一步

获取 access_token https://smartprogram.baidu.com/docs/develop/serverapi/power_exp/

获取 session_key https://smartprogram.baidu.com/docs/develop/api/open/getSessionKey/

登录流程 https://smartprogram.baidu.com/docs/develop/function/login_process/

单登录 https://smartprogram.baidu.com/docs/develop/function/login/

获取手机号码 https://smartprogram.baidu.com/docs/develop/function/login_union/

获取用户信息 https://smartprogram.baidu.com/docs/develop/function/getuserinfo/

阅读全文 >>

5月 27

才刚接触 babylonjs,就遇到天空盒。既然遇到了,就弄弄看。

相关文档

https://doc.babylonjs.com/features/featuresDeepDive/environment/skybox

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/reflectionTexture

相关下载

https://hdrihaven.com/zh

https://www.textures.com/

https://skybox.blockadelabs.com/

playground

https://playground.babylonjs.com/#Z6SWJU#5

阅读全文 >>

5月 27

用 blender 这样的 3d 建模软件,不用快捷键是不行的。有时候录一些教程,显示操作的快捷键就很有必要。screencast keys 这个插件刚好能满足需求。

下载地址: https://github.com/nutti/Screencast-Keys/releases

效果图如下图所示

这里我按了一组 shift + a 快捷键,弹出了添加面板。同时在右下角这里,显示出了我按了 shift + a 快捷键。按 n 快捷键弹出选项面板,选项面板中就包含有 screencast keys 插件的设置信息。你可以设置字号、字体、位置等。

安装方法

  1. 打开下载地址,下载最新版本的 zip 文件。
  2. 打开 blender,依次点击菜单的 编辑->偏好设置->插件,在弹出面板中点击安装,选择之前下载的 zip 文件。
  3. 然后在该面包找到该插件打钩够。

上边三步就 ok 了。你通过 n 快捷键,就可以从弹出的选项中找到该插件的设置面板。

阅读全文 >>

5月 24

babylonjs + blender 弄一个最简单的 3D效果出来。从来没有做过,那就试试吧。

最终效果: https://www.xiangrong.pro/web3d

步骤

  1. 使用 blender 画一个小椅子。
  2. 给立方体上色。
  3. 导出 glb 文件。
  4. 创建 babylongjs 项目。
  5. 加载使用 glb 文件。

先用 blender 画出小椅子并导出 glb 文件

花了好几个小时,看着 B 站的视频,用 blender 画了一个椅子。如下图所示。

椅背本来是粉色的。为了让 logo 可以显示出来,换成了这个色。

创建项目加载渲染 glb

这里,我们使用 pnpm 创建 vite 项目

pnpm crate vite

# 输入项目名 web3d
# 选择框架,这里选择最高效,最悠久的框架 Vanilla
# 选择语言, 这些选择 JavaScript
# 最后,回车。项目就建立好了

创建好项目后,我习惯性安装依赖包,并建立 git 版本控制,初始化项目

cd web3d
pnpm install
git init -b main
git add .
git commit -m 'initialize web'

我喜欢干干净净的干事情,删掉不需要的文件,并创建 src 目录,将 main.jsstyle.css 文件移到该目录中。

rm -rf counter.js
rm -rf javascript.svg
mkdir src
mv main.js ./src
mv style.css ./src

修改 index.html

  <body>
    <canvas id="canvas"></canvas>
    <script type="module" src="/src/main.js"></script>
  </body>

修改 style.css

# 删除 style.css 中所有代码,加入下边代码
* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

修改 main.js

# 删除 main.js 中所有代码,加入下边代码
import './style.css'

到此,已经很干净了。运行起来,再提交版本控制。

pnpm dev

git add .
git commit -m '删除不必要的代码'

这个时候,只有一个白白的网页。下边正式开学写 babylonjs 代码。

先安装 babylonjs 和 babylonjs-loaders

pnpm add babylonjs
pnpm add babylonjs-loaders

main.js 中修改为以下代码(之前只有一行代码)

import * as BABYLON from 'babylonjs'
import 'babylonjs-loaders'
import './style.css'

const canvas = document.getElementById('canvas');

// 创建引擎, 第二个参数为抗锯齿
const engine = new BABYLON.Engine(canvas, true)

// 创建场景
const scene = new BABYLON.Scene(engine)

/**
 * 创建相机
 * @name 名字
 * @alpha 相机的 alpha 值,水平旋转角度
 * @beta  相机的 bata 值,垂直旋转角度
 * @radius 相机的半径
 * @target 相机的目标点
 * @scene 相机所在的场景
 */
const camera = new BABYLON.ArcRotateCamera('camera', 0, 0, 0, BABYLON.Vector3.Zero(), scene)

// 设置相机的位置
camera.setPosition(new BABYLON.Vector3(0, 5, 10))

// 将相机的目标指向场景的原点
camera.setTarget(BABYLON.Vector3.Zero());

// 把相机附加到画布上, true 阻止默认操作
camera.attachControl(canvas, true)

// 顶部球形光
const hemisphericLight1 = new BABYLON.HemisphericLight(
    'light',  //光源的名称
    new BABYLON.Vector3(1, 1, 0),  //光源的方向
    scene //光源所在的场景
)

// 底部球形光
const hemisphericLight2 = new BABYLON.HemisphericLight(
    'light',  //光源的名称
    new BABYLON.Vector3(1, -1, 0),  //光源的方向
    scene //光源所在的场景
)
hemisphericLight2.intensity = 0.72

// 隐藏 loading 画面
BABYLON.SceneLoader.ShowLoadingScreen = false

BABYLON.SceneLoader.Append('models/', 'yizi.glb', scene, (glb) => {
    console.log(glb)
}, null)

// 渲染场景
engine.runRenderLoop(() => {
    scene.render()
})

// 监听尺寸更改
window.addEventListener('resize', function() {
    engine.resize()
})

到此,代码是完成了。椅子文件还没放到项目中。我们在 public 目录中创建 models文件夹,并将 blender 导出的 yizi.glb 文件放到 models文件夹下。

于是,效果如下图所示。

不知道啥原因,用镜像做的部分,显示不出来。使用官方的沙盒也是这样。

提交代码。

git add .
git commit -m '安装 babylonjs 以及 loader,并编写创建加载代码'

相关

glb 文件下载

链接: https://pan.baidu.com/s/1DnkSQaa1z_JLAYCsXeXmqw 提取码: u8p4

椅子教程

https://www.bilibili.com/video/BV1kX4y1m7G5?p=1

最后

椅子缺失的问题找到了。导出的时候将网格下的应用修改器打钩就可以了。之前镜像就是修改器之一。

代码 https://github.com/vinistudy/web3d

阅读全文 >>

5月 22

当你的电脑没有装 ps,或电脑装了 ps 不能用的时候,网页版 ps 绝对是个好东西。对于我,不仅仅是网页版 ps,是苹果手机的套图。真的忘不掉。

https://ps.gaoding.com/#/

记住的psd和数字

我知道,我用网页版 ps 打开 psd。然后将从苹果手机隔空过来的截屏图片拖入进对应图层。我先设置导入截屏图片的宽度为 756px,高度会自动调整。然后设置 x 坐标为 980px,y 坐标为 1262px。 最后点击菜单栏的文件,导出。就可以导出一张合图的苹果手机图了。

这些数字,也只是对我有用。这是 psd 决定的。

阅读全文 >>

5月 18

微信、百度小程序都支持常量 env,来自适应有圆弧屏幕的手机。头条小程序却不可以(抖音开发者官网也没有,只手搜适配,自适应等关键词没找到,看了部分文档也没找到)。头条自己的官方示范的小程序自己都没适配。这就是他们的态度。好吧,别人不做,自己总得做做好,要不体验肯定会差的。

常规处理

像苹果这种棱角是圆弧的手机,底部顶部都是要做自适应处理,才可以有更好的体验。常规操作是加一个 margin 或 一个 padding 或补一个 div。而这些都会用到这个常量: env(safe-area-inset-bottom)

比如可以这样做:

    .safe-bottom {
        margin-bottom: env(safe-area-inset-bottom);
    }

    # 或
    .safe-bottom {
        box-sizing: box-border;
        padding-bottom: env(safe-area-inset-bottom);
    }

    # 或多加一个 div
    .safe-bottom {
        height: env(safe-area-inset-bottom);
    }

甚至可以和 calc 组合使用, 比如:

.footer {
    width: 100%;
    height: calc(88rpx + env(safe-area-inset-bottom));
    box-sizing: box-border;
    padding-bottom: env(safe-area-inset-bottom);
}

可是,头条小程序中 env(safe-area-inset-bottom) 这玩意不支持。

头条小程序自适应

既然一条路走不通,那就选其他的路。找找思路。比如只要能知道圆弧区域的高度不就可以了吗。在系统信息中,会携带这些信息(叫安全区域信息)。拿到了高度,一样可以 margin,一样可以 padding 哈。

那梳理下流程。

  1. 在 main.js 中,拿到安全区域信息,并将底部的高度数据定义到 globalProperties 中。之所以这样做,是因为需要自适应场景的页面有很多个,不想每个页面都再重复去获取这些信息。
  2. 在有需要的地方使用这个高度。
# main.js
import App from './App'
import { createPinia } from 'pinia'
import {
    createSSRApp
} from 'vue'

export function createApp() {
    const app = createSSRApp(App)

    app.use(createPinia())

    // 头条自适应
    // #ifdef MP-TOUTIAO
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo && systemInfo.safeAreaInsets) {
        app.config.globalProperties.$safeTop = systemInfo.safeAreaInsets.top;
        app.config.globalProperties.$safeBottom = systemInfo.safeAreaInsets.bottom;
    }
    // #endif

    return {
        app
    }
}

# 使用的地方
<view  hover-class="hover" :style="{'margin-bottom': $safeBottom + 'px'}">
</view>

好吧,就这样完事了。

字节小程序官方实例

滑到底部了,不仅不自适应,底部还有一部分被挡住了。

其实,并不赞成官方实例的搞法。底部导航栏非原生,会对整个项目带来影响。页面滚动不丝滑是其中之一,滚动条会滚动到底部不好看。要不就是使用 scroolview 隐藏了滚动条。反正体验还是不怎么好。

阅读全文 >>

5月 17

初步了解了下 web3d 相关的信息。 three.js 或 babylon.js 要学一个(它们会封装 WebGL 和 WebGPU 的Api)。然后 blender 也要学一下。如果做虚拟城市这块的建模,building tools 这个插件很多人在用。那就用吧。

下载地址

https://ranjian0.github.io/building_tools/

下载好后,打开 blender ,点击菜单栏的编辑,再点插件,再添加,把这个插件添加进去。

阅读全文 >>

5月 17

随着社会的发展,技术的发展,市场的发展,平面展示已不能满足需要了。商品可以 3D 化,道路建筑可以 3D 化。而 web 又是最通用的一种承载形式,web3D 的的必要性就突出来了。其实,很早就有了。我是萌新,可不能不去了解,甚至学习。

WebGL

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

WebGL(Web 图形库)是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在 HTML5 canvas 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

目前支持 WebGL 的浏览器有:Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ 和 Microsoft Edge build 10240+;然而,WebGL 一些特性也需要用户的硬件设备支持。

WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

WebGL 是基于 OpenGL 演进的。

WebGPU

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGPU_API

WebGPU 是 WebGL 的继任者,为现代 GPU 提供更好的兼容、支持更通用的 GPU 计算、更快的操作以及能够访问到更高级的 GPU 特性。

web3D 渲染

web3D应用 -> 引擎 -> web端图形API -> 本地端图形 API -> 显卡

WebGL 和 WebGPU 在这个环节中,本地图形 API 是不一样的。 WebGL 使用的是 OpenGL 或 DirectX。WebGPU 使用的是 Direct3D 或 Metal 或 Vulkan。

对于用户,只会关心所看到的 3D 效果。对于实现者,要了解知道渲染的流程还有熟悉 web 端图形 API 的使用。直接使用 WebGL API 或 WebGPU API 是能够实现 3D 效果。但会有第三方工具,比如 three.js 和 babylon.js 。它们会对 API 进行封装转换,可以省很多很多事。

blender 也是工具。
https://www.blender.org/
https://zhuanlan.zhihu.com/p/59575701
https://www.bilibili.com/video/BV13M41137Ki/?p=2&spm_id_from=pageDriver&vd_source=6993ce0cd88c9947ac7681b6864a99d0

相关文章

https://zhuanlan.zhihu.com/p/369632693

https://juejin.cn/post/6966584226758000648

https://juejin.cn/post/7184099035018428472

https://juejin.cn/post/7053137406463049742

阅读全文 >>

5月 13

对于国内的开发生态,uniapp 的贡献可真不小。现在又推出 uts,有需要的是可以了解、学习、使用的。

什么是uts

uts,全称 uni type script,统一、强类型、脚本语言。

它可以被编译为不同平台的编程语言,如:

  • web平台,编译为JavaScript
  • Android平台,编译为Kotlin
  • iOS平台,编译为Swift(HX 3.6.7+ 版本支持)

uts 采用了与 ts 基本一致的语法规范,支持绝大部分 ES6 API。

什么是uts插件

现有的 uni-app,仍以js引擎为主。但从HBuilderX 3.6开始,uni-app 支持 uts 插件(3.6支持vue3编译器,3.6.8支持vue2编译器)。

也就是 uts 的第一步不是完整开发一个独立的 app,而是作为 uni-app 的插件。后续 uts 会持续迭代,达到完整开发 app 的水平。

uts 插件编译到 app 平台时,在功能上相当于 uni-app 之前的 app 原生插件,也就是 Kotlin 和 Swift 开发的插件。

开发 uts 插件不需要熟悉 Kotlin 和 Swift 的语法,因为使用的是基于 ts 的语法。但需要熟悉 Android 和 iOS 的系统 API,否则无法调用原生能力。

uts插件与uni原生语言插件的区别

在 HBuilderX 3.6 以前,uni-app 在 App 侧只有一种原生插件,即用 java 或 Objective-C 开发的插件。

在 uts 推出后,原来的 “App原生插件”,更名为 “App原生语言插件”。

不同的名字,代表它们需要开发者编写语言不同。但殊途同归,最后都编译为原生的二进制代码。

原生语言插件 uts插件
开发语言 java/oc uts
开发环境 Android Studio/XCode HBuilderX
打包方式 外挂aar 等产出物 编译时生成原生代码
js层调用方式 uni.requireNativePlugin() 普通的js函数/对象,可以直接 import,支持摇树优化

相当于原生语言插件,uts插件的优势:

  • 统一了编程语言(uts),一种语言开发所有平台,真正大前端。
  • 统一了开发工具(HBuilderX),免除搭建复杂的原生开发环境。
  • 插件封装中要理解的概念更少。 传统原生语言插件需要在js和原生层处理通信,使用各种特殊转换,使用特殊语法导入,注意事项很多。uts统一为纯前端概念,简单清晰。
  • uts 下前端和原生可以统一在 HBuilderX 中联调。而传统原生语言插件需要在多个开发工具间切换,联调复杂。

uts插件和Native.js的区别

  • Native.js 运行在js上,通过反射调用os api。功能和性能都不及真正的原生
  • uts 在 app 上不运行在 js 引擎里,是真正的原生。

文章来源

https://uniapp.dcloud.net.cn/plugin/uts-plugin.html

阅读全文 >>

5月 10

为了一些安全性,自己的电脑(本地)工具连接 mysql 的时候,我会限制它的 ip。可过一段时间自己的 ip 就会改变。这个时候,就连不上去。这个时候,就再修改下 ip,使其生效就好。

操作

服务端

# 连接 mysql
mysql -uroot -p
# 输入秘密
xxxxxx

# 切换到数据库
use mysql

# 先查看查看 mysql 用户表里存了哪几个用户以及请求地址限制
select host,user from user;

# 可以看到 host 中有具体的 ip 的 还有 localhost。 这个 host 就是限制连接 mysql 服务的 ip。
# 假如之前设置外部能访问的 ip 是 138.xxx.xxx.xxx, 用户名是 xx_mysql
# 你新的 ip 是 136.xxx.xx.xx
# 修改
update user set host ='136.xxx.xx.xx' where user = 'xx_mysql';

# 生效
flush privileges;

阅读全文 >>