「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战 」
背景
我们用threejs时因为是在画布上操作，并且是三维空间，所以不是很方便，也经常出错，调试也很不方便，为了解决以上问题我发现了几个非常好用的插件。下面给大家介绍一下：
插件
lil-gui
文档
npmjs: www.npmjs.com/package/lil…
介绍
lil-gui是轻量级的icon形用户界面框架，可以用来控制Javascript的变量，比如WebGL中一个物体的尺寸、颜色、位置。
使用
- 引入
lil-gui
import GUI from 'lil-gui';
- 初始化
const gui = new GUI();
- 规则制定
const myObject = {
myBoolean: true,
myFunction: function() { ... },
myString: 'lil-gui',
myNumber: 1
};
- 添加规则
gui.add( myObject, 'myBoolean' ); // 单选
gui.add( myObject, 'myFunction' ); // 按钮
gui.add( myObject, 'myString' ); // 文本
gui.add( myObject, 'myNumber' ); // 数字
- 添加滑块并设置最小值和最大值，默认值
// Add sliders to number fields by passing min and max
gui.add( myObject, 'myNumber', 0, 1 );
gui.add( myObject, 'myNumber', 0, 100, 2 ); // snap to even numbers
- 添加下拉并设置选项
// Create dropdowns by passing an array or object of named values
gui.add( myObject, 'myNumber', [ 0, 1, 2 ] );
gui.add( myObject, 'myNumber', { Label1: 0, Label2: 1, Label3: 2 } );
- 可链的方法
// Chainable methods
gui.add( myObject, 'myProperty' )
.name( 'Custom Name' )
.onChange( value => {
console.log( value );
} );
- 创建颜色选择器
// Create color pickers for multiple color formats
const colorFormats = {
string: '#ffffff',
int: 0xffffff,
object: { r: 1, g: 1, b: 1 },
array: [ 1, 1, 1 ]
};
gui.addColor( colorFormats, 'string' );
- 大概效果，如下图
stats
文档
github: github.com/mrdoob/stat…
介绍
stats是JavaScript性能监控器，同样也可以测试webgl的渲染性能。
使用
- 引入
stats
import Stats from "three/examples/jsm/libs/stats.module";
- 初始化
stats: Stats | null = null;
this.initStats();
- 添加
dom
initStats(): void {
this.stats = Stats();
document.body.appendChild(this.stats.dom);
}
- 效果如下
AxesHelper
文档
介绍
AxesHelper是用于简单模拟3个坐标轴的对象。红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴。这个插件非常直观的展现了一个三维空间，并直接建立了三维的一个直角坐标系，大大的方便程序员的编程效率。
使用
//辅助工具
const helper = new THREE.AxesHelper(100);
this.scene.add(helper);
效果如下：
总结
以上几个插件是我总结的常用threejs插件，希望对大家有所帮助。希望大家多多点赞评论。
