用 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
步骤
- 使用 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,并编写创建加载代码'
相关
glb 文件下载
链接: https://pan.baidu.com/s/1DnkSQaa1z_JLAYCsXeXmqw 提取码: u8p4
椅子教程
https://www.bilibili.com/video/BV1kX4y1m7G5?p=1
最后
椅子缺失的问题找到了。导出的时候将网格下的应用修改器打钩就可以了。之前镜像就是修改器之一。
初步了解了下 web3d 相关的信息。 three.js 或 babylon.js 要学一个(它们会封装 WebGL 和 WebGPU 的Api)。然后 blender 也要学一下。如果做虚拟城市这块的建模,building tools 这个插件很多人在用。那就用吧。
下载地址
https://ranjian0.github.io/building_tools/
下载好后,打开 blender ,点击菜单栏的编辑,再点插件,再添加,把这个插件添加进去。
随着社会的发展,技术的发展,市场的发展,平面展示已不能满足需要了。商品可以 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