NPM 包 @geppettoengine/geppetto-client 使用教程

简介

@geppettoengine/geppetto-client 是一个用于在浏览器中呈现 3D 模型的 JavaScript 库，它可以与 Geppetto 模型编辑器一起使用。该库提供了一系列 API 来管理和与 Geppetto 模型进行交互，使您可以在您自己的网站上呈现和操作 3D 模型。

安装

@geppettoengine/geppetto-client 可以通过 npm 安装:

npm install @geppettoengine/geppetto-client

引入

您可以使用以下语句将 @geppettoengine/geppetto-client 引入到您的代码中：

import { GeppettoClient } from '@geppettoengine/geppetto-client';

实例化

实例化一个 GeppettoClient 对象需要知道您将要连接的 Geppetto 模型的 URL。您可以使用以下代码创建 GeppettoClient 对象：

const client = new GeppettoClient('url-to-geppetto');

构造函数参数

示例

import { GeppettoClient } from '@geppettoengine/client';

const client = new GeppettoClient('http://localhost:8080/geppetto');

连接

调用 client.connect() 方法可以连接到指定的 Geppetto 模型，并获取与之相关的所有数据。建议在连接到 Geppetto 模型后将其存储在全局对象中，以便您随时可以访问它。

示例

client
  .connect()
  .then(() => console.log('Connected to Geppetto'))
  .catch((error) => console.error(error));

呈现 3D 模型

当您已连接到 Geppetto 模型时，您可以使用 client.start() 方法将 Geppetto 的 3D 视图嵌入到您的网站中。

示例

client.start();

操作 3D 模型

您可以使用 client 对象提供的一些 API 来管理和与 3D 模型进行交互。

以下是一个使用 client 对象的示例，该示例演示如何在 3D 模型中选择一个实体，并将其高亮显示。

client.onModelLoaded(() => {
  const entity = client.getEntityByName('EntityName');
  entity.setColor(1, 0, 0); // 将实体颜色设置为红色
});

总结

本文介绍了如何使用 @geppettoengine/geppetto-client 包来呈现和操作 3D 模型。我们学习了如何实例化一个 GeppettoClient 对象，如何连接到 Geppetto 模型，以及如何使用 client 对象提供的 API 来管理和与 3D 模型进行交互。希望这篇文章能为您提供有价值的指导。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/116399