Three.js 快速入门教程 06 - 辅助工具

最佳编码阿柚

已于 2024-05-20 10:38:22 修改

阅读量436

点赞数 7

分类专栏： # Three.js 文章标签：数据可视化 3d 前端 javascript

于 2024-05-16 09:00:00 首次发布

本文链接：https://blog.csdn.net/besyo/article/details/138912191

版权

这篇博客介绍了Three.js中的辅助工具，包括坐标轴辅助、坐标网格辅助、灯光辅助和相机轨道控制器，用于调试和可视化场景。此外，还提到了stats.js用于查看渲染帧率，以及dat.GUI库用于实时调节对象属性，提供丰富的交互体验。

摘要由CSDN通过智能技术生成

Three.js 内置了大量的 辅助工具（Helper） ，它是一组用于辅助调试、调整和可视化场景中元素的工具。这些工具可用于展示、标记和操控场景中的对象、灯光、相机等，以帮助开发者更好地理解和调试场景。

同时可以选择 stats.js 和 dat.gui 这样的第三方库，为 Three.js 开发提供辅助能力。

坐标轴辅助

在这里插入图片描述
坐标轴辅助AxesHelper，在场景中放置一个参考坐标轴。其中红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴。

// 可传入轴的线段长度
const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);

坐标网格辅助

在这里插入图片描述
坐标网格辅助GridHelper，在场景中放置一个纵横交错的网格。可用于模拟地面作为场景参考。

// 可分别传入坐标格尺寸和坐标格分段数
const gridHelper = new THREE.GridHelper(100, 10);
scene.add(gridHelper);

灯光辅助

根据灯光类型的不同提供了不同的辅助工具，用于在场景中表示灯光光位置的平面和表示灯光光方向的线段。

下面以平行光辅助DirectionalLightHelper为例

const light = new THREE.DirectionalLight(0xffffff);
scene.add(light);

const helper = new THREE.DirectionalLightHelper(light);
scene.add(helper);

相机轨道控制器

相机轨道控制器OrbitControls，可以通过鼠标操作来实现旋转缩放的预览效果，使我们观察场景更加方便，操作方式如下

旋转：拖动鼠标左键
缩放：滚动鼠标中键
平移：拖动鼠标右键

// 引入相机轨道控制器
import {
    OrbitControls } from "three/addons/controls/OrbitControls.js";
// 通过npm安装的Three.js可能需要这种方式引入
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 需要传入相机对象和渲染器对象的domE