Write the Code. Change the World.

分类目录
3月 21

网页简易实现 3d glb 等模型预览。常见的插件有 threejs 和 babylonjs。

https://endoc.cnbabylon.com/extensions/the_babylon_viewer

https://www.npmjs.com/package/babylonjs-viewer

https://sandbox.babylonjs.com/

开始

# 安装
pnpm add babylonjs-viewer

# 使用
<template>
    <div id="babylon-view-con"></div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import * as BabylonViewer from 'babylonjs-viewer';

function playByBabylon(url: string | null) {
  nextTick(() => {
    if (!url) {
      url = 'https://playground.babylonjs.com/scenes/Rabbit.babylon'
    }

    let domElement: HTMLElement | null = document.getElementById('babylon-view-con');
    if (domElement) {
      new BabylonViewer.DefaultViewer(domElement, {
        scene: {
          debug: false
        },
        camera: {
          behaviors: {
            autoRotate: 0
          }
        },
        model: {
          url: url
        }
      })
    }
  })
}
</script>

继续阅读

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月 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