用 blender 这样的 3d 建模软件，不用快捷键是不行的。有时候录一些教程，显示操作的快捷键就很有必要。screencast keys 这个插件刚好能满足需求。
下载地址： https://github.com/nutti/Screencast-Keys/releases
效果图如下图所示
这里我按了一组 shift + a 快捷键，弹出了添加面板。同时在右下角这里，显示出了我按了 shift + a 快捷键。按 n 快捷键弹出选项面板，选项面板中就包含有 screencast keys 插件的设置信息。你可以设置字号、字体、位置等。
zip 文件。blender，依次点击菜单的 编辑->偏好设置->插件，在弹出面板中点击安装，选择之前下载的 zip 文件。上边三步就 ok 了。你通过 n 快捷键，就可以从弹出的选项中找到该插件的设置面板。
babylonjs + blender 弄一个最简单的 3D效果出来。从来没有做过，那就试试吧。
最终效果： https://www.xiangrong.pro/web3d
花了好几个小时，看着 B 站的视频，用 blender 画了一个椅子。如下图所示。
椅背本来是粉色的。为了让 logo 可以显示出来，换成了这个色。
这里，我们使用 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，并编写创建加载代码'glb 文件下载
链接: https://pan.baidu.com/s/1DnkSQaa1z_JLAYCsXeXmqw 提取码: u8p4
椅子教程
https://www.bilibili.com/video/BV1kX4y1m7G5?p=1
椅子缺失的问题找到了。导出的时候将网格下的应用修改器打钩就可以了。之前镜像就是修改器之一。
当你的电脑没有装 ps，或电脑装了 ps 不能用的时候，网页版 ps 绝对是个好东西。对于我，不仅仅是网页版 ps，是苹果手机的套图。真的忘不掉。
我知道，我用网页版 ps 打开 psd。然后将从苹果手机隔空过来的截屏图片拖入进对应图层。我先设置导入截屏图片的宽度为 756px，高度会自动调整。然后设置 x 坐标为 980px，y 坐标为 1262px。 最后点击菜单栏的文件，导出。就可以导出一张合图的苹果手机图了。
这些数字，也只是对我有用。这是 psd 决定的。
微信、百度小程序都支持常量 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 哈。
那梳理下流程。
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 隐藏了滚动条。反正体验还是不怎么好。
初步了解了下 web3d 相关的信息。 three.js 或 babylon.js 要学一个（它们会封装 WebGL 和 WebGPU 的Api）。然后 blender 也要学一下。如果做虚拟城市这块的建模，building tools 这个插件很多人在用。那就用吧。
https://ranjian0.github.io/building_tools/
下载好后，打开 blender ，点击菜单栏的编辑，再点插件，再添加，把这个插件添加进去。
随着社会的发展，技术的发展，市场的发展，平面展示已不能满足需要了。商品可以 3D 化，道路建筑可以 3D 化。而 web 又是最通用的一种承载形式，web3D 的的必要性就突出来了。其实，很早就有了。我是萌新，可不能不去了解，甚至学习。
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 演进的。
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGPU_API
WebGPU 是 WebGL 的继任者，为现代 GPU 提供更好的兼容、支持更通用的 GPU 计算、更快的操作以及能够访问到更高级的 GPU 特性。
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
对于国内的开发生态，uniapp 的贡献可真不小。现在又推出 uts，有需要的是可以了解、学习、使用的。
uts，全称 uni type script，统一、强类型、脚本语言。
它可以被编译为不同平台的编程语言，如：
uts 采用了与 ts 基本一致的语法规范，支持绝大部分 ES6 API。
现有的 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，否则无法调用原生能力。
在 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插件的优势：
为了一些安全性，自己的电脑（本地）工具连接 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;头条、抖音、字节啥的都叫抖音小程序。没开始之前，以为和其他小程序一样，看这文档，噼里啪啦就能做下来。发现不是那么会事。不是不好开发，是一开始抖音就限制了你开发的能力。比如，你想自定义顶部导航栏不允许，比如企业级账号想获取手机号码不允许，比如获取定位不允许。作为一个小程序，一个常规的社交 app，这些是最基本的能力。这都不允许，怎么好把小程序体验开发到极致呢。
不是不允许，是要你满足它特定的条件，才渐渐的开放给你。不明白这是要搞啥子。好吧，只能妥协，开始开发出不是很满意的小程序出来。
顺便吐槽小各家小程序的顶部的胶囊。个人觉得还是微信和支付宝的好看一些。有些家不仅不好看，感觉就毫无设计可言。包括抖音的。胶囊丑，顶部导航栏也丑。
https://developer.open-douyin.com/
前边那个弹窗还有一些瑕疵，看得到的瑕疵。比如，使用贝塞尔曲线来模拟弹簧那种伸缩效果时，会露底。如果说是变魔术，用土话讲，那就是穿帮了。还有就是弹窗的动画的时间没有定义的地方。这次都加上了。先看看效果。
popupLayout.vue
<template>
<view v-if="controller.open" class="popup-layer" catchtouchmove="true">
<view v-if="direction == 'top'" class="top-bg-color" :class="{ 'top-bg-show': controller.bg, 'top-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>
<view v-if="direction == 'bottom'" class="bottom-bg-color" :class="{ 'bottom-bg-show': controller.bg, 'bottom-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>
<view v-if="direction == 'left'" class="left-bg-color" :class="{ 'left-bg-show': controller.bg, 'left-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>
<view v-if="direction == 'right'" class="right-bg-color" :class="{ 'right-bg-show': controller.bg, 'right-bg-hide': !controller.bg }" :style="{ opacity: controller.bgOpacity }" @tap="close"></view>
<view class="popup-content" :style="_location">
<slot></slot>
<view v-if="timingFun == 'cubic-bezier' && contentBgColor" :style="{background:contentBgColor}" :class="'content-bg-' + direction"></view>
</view>
</view>
</template>
<script setup>
import { reactive, defineProps, defineEmits, defineExpose, computed, onMounted, watch } from 'vue';
const controller = reactive({
open: false,
lock: false,
bg: false,
bgOpacity: 0,
translate: -100,
time: null
});
const emits = defineEmits(['onClose']);
const timingFuns = {
'cubic-bezier': 'transition-timing-function: cubic-bezier(.15,-0.88,.41,1.68);',
ease: 'transition-timing-function: easy;',
'ease-in': 'transition-timing-function: ease-in;',
'ease-out': 'transition-timing-function: ease-out;',
'ease-in-out': 'transition-timing-function: ease-in-out;',
linear: 'transition-timing-function: linear;'
};
const props = defineProps({
direction: {
type: String,
default: 'top' // 方向 top，bottom，left，right
},
bgOpacity: {
type: Number,
default: 0.38
},
timingFun: {
type: String,
default: 'cubic-bezier'
},
contentBgColor: {
type: String,
default: ''
},
transitionDuration: {
type: String,
default: '0.5s'
}
});
watch(() => props.timingFun, (newValue, oldValue) => {}, {
immediate: true
});
const _translate = computed(() => {
const transformObj = {
top: `transform:translateY(${-controller.translate}%)`,
bottom: `transform:translateY(${controller.translate}%)`,
left: `transform:translateX(${-controller.translate}%)`,
right: `transform:translateX(${controller.translate}%)`
};
return transformObj[props.direction];
});
const _location = computed(() => {
const positionValue = {
top: 'bottom:0px;width:100%;',
bottom: 'top:0px;width:100%;',
left: 'right:0px;top:0px;height:100%;',
right: 'left:0px;top:0px;height:100%;'
};
let style = `transition-duration:${props.transitionDuration};`;
if (timingFuns[props.timingFun]) {
style += timingFuns[props.timingFun];
}
return style + positionValue[props.direction] + _translate.value;
});
const open = function() {
if (controller.open) {
return;
}
controller.open = true;
let openTimer = setTimeout(() => {
clearTimeout(openTimer);
controller.lock = true;
controller.bg = true;
controller.bgOpacity = props.bgOpacity;
controller.translate = -0.1;
openTimer = null;
}, 100);
// 防止误触
let lockTimer = setTimeout(() => {
clearTimeout(lockTimer);
controller.lock = false;
lockTimer = null;
}, 500);
};
const close = function() {
if (controller.timer || controller.lock) {
return;
}
controller.bgOpacity = 0;
controller.bg = false;
controller.translate = -100;
controller.timer = setTimeout(() => {
clearTimeout(controller.timer);
controller.open = false;
controller.timer = null;
emits('onClose');
}, 500);
};
defineExpose({
open,
close
});
</script>
<style lang="scss" scoped>
.popup-layer {
width: 100vw;
height: 100vh;
overflow: hidden;
top: 0px;
left: 0px;
position: fixed;
z-index: 9999;
.popup-content {
position: absolute;
z-index: 1000000;
transition: transform;
}
.content-bg-top {
position: absolute;
width: 100%;
height: 108rpx;
left: 0;
bottom: -100rpx;
}
.content-bg-bottom {
position: absolute;
width: 100%;
height: 108rpx;
left: 0;
top: -100rpx;
}
.content-bg-left {
position: absolute;
width: 108rpx;
height: 100%;
top: 0;
right: -100rpx;
}
.content-bg-right {
position: absolute;
width: 108rpx;
height: 100%;
top: 0;
left: -100rpx;
}
}
// 底部出来
.top-bg-color {
width: 120vw;
height: 120vh;
background: #000;
position: relative;
left: -10vw;
top: 121vh;
opacity: 0;
transition: 0.24s opacity, 0.24s top;
}
.top-bg-show {
top: 0;
}
.top-bg-hide {
top: 121vh;
}
.top-bg-color:after {
content: '';
width: 120vw;
height: 120vw;
border-radius: 50%;
background-color: #000;
position: absolute;
left: 0;
top: -30vw;
}
// 顶部出来
.bottom-bg-color {
width: 120vw;
height: 120vh;
background: #000;
position: relative;
left: -10vw;
bottom: 121vh;
opacity: 0;
transition: 0.24s opacity, 0.24s bottom;
}
.bottom-bg-show {
bottom: 0;
}
.bottom-bg-hide {
bottom: 121vh;
}
.bottom-bg-color:after {
content: '';
width: 120vw;
height: 120vw;
border-radius: 50%;
background-color: #000;
position: absolute;
left: 0;
bottom: -30vw;
}
// 右边出来
.left-bg-color {
width: 120vw;
height: 120vh;
background: #000;
position: relative;
top: -10vh;
left: 121vw;
opacity: 0;
transition: 0.24s opacity, 0.24s left;
}
.left-bg-show {
left: 0;
}
.left-bg-hide {
left: 121vw;
}
.left-bg-color:after {
content: '';
width: 120vh;
height: 120vh;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
left: -30vh;
}
// 左边边出来
.right-bg-color {
width: 120vw;
height: 120vh;
background: #000;
position: relative;
top: -10vh;
right: 121vw;
opacity: 0;
transition: 0.24s opacity, 0.24s left;
}
.right-bg-show {
right: 0;
}
.right-bg-hide {
right: 121vw;
}
.right-bg-color:after {
content: '';
width: 120vh;
height: 120vh;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
right: -30vh;
}
</style>