18.Three.js技巧之调试

18 Three.js技巧之调试

本文讲解一些Three.js的调试技巧，是其他程序员在开发Three.js过程中积累的一些找错、调试经验。

其中一些调试经验适用于所有的前端项目

调试的几点经验

1、使用浏览器调试

个人推荐使用 谷歌浏览器 或 最新版的微软Edge浏览器 调试工具。

以谷歌浏览器Chrome为例，打开调试的快捷键为：Ctrl + Shift + I

个别测试时候，鼠标放在画布上点击右键不显示菜单，或者不显示 “检查”，此时使用快捷键调出调试工具最为合适。

2、关闭缓存

对于开发阶段，为了确保所加载的各种资源是最新的，而不是缓存的，所以推荐关闭缓存。

关闭缓存的方法：打开调试面板(Toggle Tools) >网络面板(Network) >勾选 禁用缓存(Disable cache)

3、善用信息打印Console

可以通过在代码中添加console.log(xxx)，或者直接在Console面板中 添加打印代码，查看当前JS环境中的信息变量。

4、添加debugger

我们可以在代码中，添加debugger ，给代码执行过程中添加断点，好一步步确认整个执行过程。

  1. 直接通过VSCoder在某行代码左侧，添加断点(小红点)
  2. 在代码中添加 debugger，当代码执行到此处时即进入调试状态

个人推荐使用第1种形式添加断点

5、通过URL来获取参数

假如说我们现在需要在场景上创建一个立方体，URL参数中包含立方体对应的尺寸。

假设URL参数为：

https://xxx.com/threejs/xxx.index?width=3&height=2&depth=1

width=3&height=2&depth=1 即我们需要获取并配置给立方体的参数。

为了避免参数缺失或错误而导致立方体创建失败，我们给立方体的 宽、高、厚 设置一个默认值1

我们可以使用浏览器新增的URLSearchParams来解析URL参数：

interface URLParams {
    width: number,
    height: number,
    depth: number
}

const getURLParams = (): URLParams => {
    const params = new URLSearchParams(window.location.search.substring(1))
    const widthStr = params.get('width')
    const heightStr = params.get('height')
    const depthStr = params.get('depth')

    let [width, height, depth] = [0, 0, 0]

    if (widthStr) { width = parseInt(widthStr, 10) || 1 }
    if (heightStr) { height = parseInt(heightStr, 10) || 1 }
    if (depthStr) { depth = parseInt(depthStr, 10) || 1 }

    return { width, height, depth }
}

const TestDebugging = () => {
    const urlParams = getURLParams() //获取 URL 参数
    ...

    const geometry = new Three.BoxBufferGeometry(urlParams.width, urlParams.height, urlParams.depth)

    ...
}

6、把一些参数显示在屏幕上

我们还以 刚才的代码为例，在之前的示例中，我们是将组件直接return一个<canvas />对象，

return (
    <canvas ref={canvasRef} className='full-screen' />
)

我们可以改造一下：

return (
    <div className='full-screen'>
        <canvas ref={canvasRef} className='full-screen' />
        <div className='debug'>
            <span>width:{urlParams.width}</span>
            <span>height:{urlParams.height}</span>
            <span>depth:{urlParams.depth}</span>
        </div>
    </div>
）

对应的样式：

.full-screen, canvas {
    display: block;
    height: inherit;
    width: inherit;
}

.debug {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 80px;
    padding: 20px;
    background-color: rgba($color: #FFFFFF, $alpha: 0.7);
}

.debug span {
    display: block;
}

这样当我们调试网页的时候，就可以直接在左上角，看到 立方体的尺寸具体的值。

本示例演示的立方体尺寸是固定的，若通过useState来定义尺寸，且尺寸会发生修改，那么左上角的展示的参数也可以对应修改成动态可变动的。

依次类推，可以延展成其他参数展示

7、把window.requestAnimationFrame添加在靠后位置

在之前的一些示例中，渲染场景的函数，可能如下：

const render = () => {
    renderer.render(scene, camera)
    window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)

你是否考虑过，假设我们修改成这样：

const render = () => {
    window.requestAnimationFrame(render) //代码顺序改变
    renderer.render(scene, camera)
}
window.requestAnimationFrame(render)

代码顺序调整后，会有什么问题吗？

答：这里可能会产生一个隐患——由于window.requestAnimationFrame代码在前，renderer.render(scene, camera)代码在后，那么意味着 即使renderer.render()执行发生错误，那么代码依然在下一帧中继续执行。

而我们之前的顺序是renderer.render()在前，window.requestAnimationFrame在后，那么万一renderer.render()执行时发生错误，此时 浏览器即报错，JS停止运行，那么后面的window.requestAnimationFrame就不会再执行了。

结论：应该尽量把window.requestAnimationFrame添加到靠后位置。

8、检查Three.js中的单位

在Three.js中，单位并没有统一，具体表现在：

  1. 镜头的角度使用的是度数、而其他地方涉及角度时单位使用的是 弧度。
  2. 默认情况下，对于距离、尺寸的数值1表示1米，但是也可以通过配置让数值1表示为1厘米。

因此，在使用Three.js时，关于数值单位请格外留意。

9、添加辅助对象、添加镜头轨道控制器

在开发阶段，可以多添加一些辅助对象，例如：坐标辅助对象、灯光辅助对象、镜头辅助对象。

辅助对象可以比较直观得帮助我们去观察，去调试。

同时也要添加镜头轨道控制器，例如OrbitControls，可以让我们比较方便操控、查看场景。

10、必要时可以将物体材质设置为MeshBasicMaterial

假设你设置的物体材质是可反光材料，但是渲染时发现并没有渲染出该物体。

这个时候，你可以先将物体材质修改为不反光的MeshBasicMaterial，这样可以快速排除一些问题。

假设物体材质不反光，此时若依然渲染不出物体，那么就可以肯定问题没有出在灯光上。

反之，则应该去检查灯光的问题。

11、检查镜头的near和far配置

有些时候场景没有渲染出物体，那么你也要去检查一下镜头的near和far的值。

比如我们可以暂时性的将镜头的far设置为10000，或者将near设置为0.001，在这种极端配置下，再去看场景是否渲染出物体。

调试结束后，记得将near和far调整会合理的精度范围。

12、遇到疑惑的地方，查文档，查源码

遇到某些Three.js疑惑的地方，例如某属性，某方法，请记得一定先去查阅官方文档，如果没有解决就直接去看Three.js的源码。

Three.js的源码并不是特别复杂，要敢于查看源码来解决疑惑。

使用GUI调试场景中的参数

图形用户界面( Graphical User Interface )简称GUI。

主要目的是用来帮我们快速搭建可视化调试参数面板。

针对JS的GUI ——dat.gui

官网地址：https://github.com/dataarts/dat.gui

针对React的GUI——react-dat-gui

官网地址：https://github.com/claus/react-dat-gui

react-dat-gui的具体用法，请查看我的另外一篇文章：React中使用GUI.md

本教程所有示例都是基于react + typescript的，所以我们选择使用react-dat-gui

在我们后续的示例中，就会使用到react-dat-gui。

调试GLSL

图形库着色语言( Graphic Library Shader Language )简称GLSL。

学不动了，学不动了！

GLSL的相关介绍，可查阅：

WebGL与GLSL：https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-shaders-and-glsl.html

WebGL2与GLSL：https://webgl2fundamentals.org/webgl/lessons/zh_cn/webgl-shaders-and-glsl.html

由于我个人没有学习过WebGL和GLSL，所以暂时先不讨论如何调试GLSL。

谷歌浏览器还有一个专门用来调试着色器的插件：Shader Editor

https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob?hl=en

关于Three.js的调试技巧，就讲到这里。

接下来讲解Canvas的一些常用小技巧。

上一页
下一页

最近更新于0001-01-01