非你网

5月 27

babylonjs 天空盒以及相关素材下载站点

发表于 2023年5月27日 • 628 views • 没有评论!

诗和远方

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

playground

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

阅读全文 >>

5月 27

blender 记录显示操作快捷键插件 screencast keys

发表于 2023年5月27日 • 1,545 views • 没有评论!

web3d,前端

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

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

效果图如下图所示

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

安装方法

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

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

阅读全文 >>

5月 24

babylonjs + blender 弄一个最简单的 3D效果出来

发表于 2023年5月24日 • 755 views • 没有评论!

web3d,前端

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

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

步骤

使用 blender 画一个小椅子。
给立方体上色。
导出 glb 文件。
创建 babylongjs 项目。
加载使用 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.js 和 style.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，并编写创建加载代码'

最后

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

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

阅读全文 >>

5月 22

网页版 ps

发表于 2023年5月22日 • 582 views • 没有评论!

工具

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

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

记住的psd和数字

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

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

阅读全文 >>

5月 18

字节小程序底部自适应

发表于 2023年5月18日 • 609 views • 没有评论!

前端

微信、百度小程序都支持常量 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 哈。

那梳理下流程。

在 main.js 中，拿到安全区域信息，并将底部的高度数据定义到 globalProperties 中。之所以这样做，是因为需要自适应场景的页面有很多个，不想每个页面都再重复去获取这些信息。
在有需要的地方使用这个高度。

# 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

blender 构建虚拟城市插件 building tools

发表于 2023年5月17日 • 1,000 views • 没有评论!

web3d,前端

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

下载地址

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

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

阅读全文 >>

5月 17

WebGL 和 WebGPU

发表于 2023年5月17日 • 750 views • 没有评论!

web3d,前端

随着社会的发展，技术的发展，市场的发展，平面展示已不能满足需要了。商品可以 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

什么是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 进行连接

发表于 2023年5月10日 • 576 views • 没有评论!

linux

为了一些安全性，自己的电脑（本地）工具连接 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;

阅读全文 >>

5月 09

抖音小程序开发的一些难处

发表于 2023年5月9日 • 536 views • 没有评论!

前端

头条、抖音、字节啥的都叫抖音小程序。没开始之前，以为和其他小程序一样，看这文档，噼里啪啦就能做下来。发现不是那么会事。不是不好开发，是一开始抖音就限制了你开发的能力。比如，你想自定义顶部导航栏不允许，比如企业级账号想获取手机号码不允许，比如获取定位不允许。作为一个小程序，一个常规的社交 app，这些是最基本的能力。这都不允许，怎么好把小程序体验开发到极致呢。
不是不允许，是要你满足它特定的条件，才渐渐的开放给你。不明白这是要搞啥子。好吧，只能妥协，开始开发出不是很满意的小程序出来。

顺便吐槽小各家小程序的顶部的胶囊。个人觉得还是微信和支付宝的好看一些。有些家不仅不好看，感觉就毫无设计可言。包括抖音的。胶囊丑，顶部导航栏也丑。

https://developer.open-douyin.com/

阅读全文 >>

Write the Code. Change the World.

相关文档

相关下载

playground

安装方法

步骤

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

创建项目加载渲染 glb

相关

最后

记住的psd和数字

常规处理

头条小程序自适应

字节小程序官方实例

下载地址

WebGL

WebGPU

web3D 渲染

相关文章

什么是uts

什么是uts插件

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

uts插件和Native.js的区别

文章来源

操作

2025年 6月
一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30