ScatterGL

交互式3D / 2D WebGL加速散点图点渲染器。核心功能来自嵌入投影仪，能够渲染和交互数万个点。

示例

基本用法

// 其中 `points` 是一个包含2D或3D点的数组，每个点由数字数组表示。
const dataset = new ScatterGL.Dataset(points);
const scatterGL = new ScatterGL(containerElement);
scatterGL.render(dataset);

安装

使用yarn / npm

yarn add scatter-gl

通过CDN

<!-- 加载 three.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.106.2/build/three.min.js"></script>
<!-- 加载 scatter-gl.js -->
<script src="https://cdn.jsdelivr.net/npm/scatter-gl@0.0.1/lib/scatter-gl.min.js"></script>

参数

ScatterGL构造函数可以通过ScatterGLParams对象接受多个参数：

参数	类型	描述	默认值
`camera`	`Camera`	包含相机默认参数的对象	相机参数对象（`zoom: number`，`target: Point3D`和`position: Point3D`）
`onClick`	`(point: Point \| null) => void`	点击点或其他地方时调用的回调函数
`onHover`	`(point: Point \| null) => void`	悬停在点上时调用的回调函数
`onSelect`	`(points: Point[]) => void`	选择一个或多个点时调用的回调函数
`onCameraMove`	`(cameraPosition: THREE.Vector3, cameraTarget: THREE.Vector3) => void`	由用户交互导致相机移动时调用的回调函数
`pointColorer`	`(index: number, selectedIndices: Set<number>, hoverIndex: number	null) => string`	用于确定点颜色的函数
`renderMode`	`RenderMode`	显示点的渲染模式，可选`RenderMode.POINT`、`RenderMode.SPRITE`或`RenderMode.TEXT`	`RenderMode.POINT`
`showLabelsOnHover`	`boolean`	是否在悬停时渲染标签文本	`true`
`selectEnabled`	`boolean`	`true`	用户是否可以通过点击选择点
`styles`	`Styles`	包含样式参数的对象，用于覆盖默认选项
`rotateOnStart`	`boolean`	渲染器是否在交互之前自动旋转	`true`
`orbitControls`	`OrbitControlParams`	包含轨道控制默认参数的对象	轨道控制参数对象（`zoomSpeed: number`，`autoRotateSpeed: number`和`mouseRotateSpeed: number`）

ScatterGL方法

方法	描述
`isOrbiting()`	返回轨道动画当前是否开启
`render(dataset: Dataset)`	初始化并将数据集渲染到容器元素
`resize()`	根据容器元素更新渲染大小
`resetZoom()`	将相机缩放重置为默认值
`select(pointIndices: number[])`	通过索引选择点
`setPanMode()`	将交互模式设置为"平移"
`setPointColorer(pointColorer: PointColorer)`	设置确定颜色的函数
`setHoverPointIndex()`	设置悬停点
`setPointRenderMode()`	设置点渲染模式
`setRenderMode(renderMode: RenderMode)`	设置特定渲染模式
`setSelectMode()`	将交互模式设置为"选择"
`setSequences(sequences: Sequence[])`	设置用于渲染折线的序列
`setSpriteRenderMode()`	设置精灵渲染模式
`setTextRenderMode()`	设置文本渲染模式
`updateDataset(dataset: Dataset)`	更新数据集
`startOrbitAnimation()`	开始旋转直到有交互
`stopOrbitAnimation()`	停止自动旋转