在three.js中进行调试的各种东西

本文概述

在使用three.js 时，我有时会忘记我是否正在编写不起作用的代码，或者是否由于位置或大小错误而根本没有在屏幕上绘制。¹
我添加了各种用于调试的东西，但是由于我还没有看到从那个角度总结的文档，所以我把它写成了一篇文章。

帮手

这是一个似乎用于调试的名称。
如果你在官方文档中搜索helper，你会发现这里没有介绍的。

轴助手

在画布中显示 XYZ 轴。
X 轴为红色，Y 轴为绿色，Z 轴为蓝色。

three.jsでデバッグのために入れるもの色々

使用示例

const size = 5;
const axesHelper = new THREE.AxesHelper( size );
scene.add( axesHelper );

网格助手

在 XZ 平面上绘制一个网格。
您可以指定绘制网格的区域大小和分割数。

three.jsでデバッグのために入れるもの色々

使用示例

const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper( size, divisions );
scene.add( gridHelper );

大多数情况下，上述内容就足够了，但您也可以更改网格线的颜色。
用第三个参数指定中心线的颜色，用第四个参数指定其他线的颜色。

定向光助手

可视化灯光的位置和方向。

three.jsでデバッグのために入れるもの色々

使用示例

const light = new THREE.DirectionalLight( 0xFFFFFF );
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

以上通常就足够了，但是如果你将颜色传递给第三个参数，你也可以改变方向线的颜色。

由于经常使用DirectionalLight，所以介绍DirectionalLightHelper，但也有PointLightHelper和SpotLightHelper。

统计数据

如果你使用three.js，我认为你很有可能会制作动画。
那时，它监视并显示 FPS。

three.jsでデバッグのために入れるもの色々

如果在绘制动画的函数中调用它，就会被观察到。

使用示例

import * as THREE from "three";
import Stats from 'three/examples/jsm/libs/stats.module'

// 中略：rendererやscene、cameraなどの宣言

const stats = Stats();
document.body.appendChild(stats.dom);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  stats.update();
  renderer.render(scene, camera);
}

animate();

它是一个模块，只需在依赖项中添加three.js即可使用，但它不是three.js独有的。
这是原始存储库。

轨道控制

允许您移动、旋转、缩放和操作相机。
例如，如果放置的元素太大并且在屏幕外绘制，启用 OrbitControls 将更容易找到它。

我不认为它是为了调试目的，但我倾向于将它用于某种确认。

使用示例

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 中略：rendererやscene、cameraなどの宣言

const controls = new OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;

//controls.update()はカメラのポジションなどを変更した後に呼び出さないといけない
camera.position.set( 0, 20, 100 );
controls.update();

function animate() {
  requestAnimationFrame( animate );
  // controls.enableDampingかcontrols.autoRotateがtrueに設定されている場合は必要。
  controls.update();
  renderer.render( scene, camera );
}

感谢您阅读到最后！
我们也在推特上发送信息，所以如果你喜欢，请关注我们！

我觉得这只是缺乏技巧，但至少我经常迷路。↩

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308629936.html