npm 包 cvast-3dhop 使用教程

简介

cvast-3dhop 是一个基于 Three.js 和 3DHOP 的展示工具,主要用于展示三维模型和点云数据。它是一个 npm 包,可用于前端开发中。

安装

--- ------- -----------

使用教程

导入

在项目中使用 cvast-3dhop 需要先导入这个包。

------ - ------------- - ---- --------------

初始化

初始化 Viewer 需要几个参数:

----- -------------- - --- ------------------------------- -- ------
----- ----------- - --- ---------------------------- -- -----
----- ---------- - --- --------------------------- -- ---- -----
----- ------ - --- -------------------- --------------- ------------ ------------ -- --- ------

其中,divId 是要添加 Viewer 的 HTML Dom 的 id,如:

---- ------------------

geometryLoader、imageLoader、jsonLoader 是自定义的加载器,CVAST 仅提供了一种默认的加载器,如果自定义加载器需要继承这个默认加载器。详情可见官方文档

加载模型

-----------------
  ---------- --- -- ----
  ------------- --- -- ------
  ------------- --- -- ------
  ----------- --- -- ------
  ---------- -- -- ------
  ----------- --- -- --- -- ------
  ---------------- ------ -- --------
  --------- -- -- --- -- --------
---

具体参数详见官方文档。以下代码为加载一个示例模型:

----- --------- - -
  ----------- -
    --------- ----- ---- -----
    ------ ----- ---- -----
  --
--
-----------------
  ----------
  ------------- ----------------------
  ------------- ----------------------
  ----------- ------------------------- -------------------------
  ---------- ---
  ----------- ----- -- ---
  --------- -- -- -
    -----------------------
  --
---

控制显示

cvast-3dhop 提供了一些控制显示的方法,如:

-- ---- ------------ - ------- - ----- --
----------------------------
----------------------------

-- ---- ------ -----------------------
--------------------------------------------------------
--------------------------------------------------------

-- ------
---------------------------

-- --------
-----------------------

以上只是部分方法,更多 API 详见官方文档

示例代码

完整示例代码:

--------- -----
------

------
  ----- --------------- --
  ------------ ---------------
  -------
    ------ -
      ------ -----
      ------- -----
    -
  --------
-------

------
  --------- -------
  ---- ------------------
  ------- -------------------------------------------------------
  ------- ----------------------------------------------------------
  ------- ------------------------------------------------------------------
  --------
    ----- ----- - ---------
    ----- -------------- - --- ------------------------------- -- ------
    ----- ----------- - --- ---------------------------- -- -----
    ----- ---------- - --- --------------------------- -- ---- -----
    ----- ------ - --- -------------------- --------------- ------------ ------------ -- --- ------

    ----- --------- - -
      ----------- -
        --------- ----- ---- -----
        ------ ----- ---- -----
      --
    --
    -----------------
      ----------
      ------------- ----------------------
      ------------- ----------------------
      ----------- ------------------------- -------------------------
      ---------- ---
      ----------- ----- -- ---
      --------- -- -- -
        -----------------------
      --
    ---
  ---------
-------

-------

总结

通过本文的介绍,我们可以使用 npm 包 cvast-3dhop,在前端中展示三维模型和点云数据。希望本文对大家有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005601781e8991b448de34a


猜你喜欢

  • npm 包 clsnames 使用教程

    在前端开发中,通常需要动态生成 class 名称。手写 class 名称的代码不仅冗长而且容易出错,因此我们可以使用 npm 包 clsnames 来帮助我们快速生成 class 名称。

    3 年前
  • npm包@fabiospampinato/watch 使用教程

    在前端开发中,文件改动的监测是一个重要而又不可避免的问题。为了解决这一问题,我们通常会用到一些工具来进行自动化处理,其中比较常用的一种方式就是使用监测文件系统变化的工具。

    3 年前
  • npm 包 easyparser 使用教程

    在前端开发中,我们通常需要对网页中的 HTML、CSS、JavaScript 代码进行解析和操作,以达到自己的需求。而 easyparser 是一款非常方便的 npm 包,可以让我们更加简单地完成这些...

    3 年前
  • npm 包 hexo-content-api 使用教程

    在 Hexo 静态博客中,通过 npm 包 hexo-content-api 可以实现通过 API 的方式创建、更新和删除文章、页面和草稿。这种方式可以使得我们能够在使用其他应用程序或博客客户端时,方...

    3 年前
  • npm 包 dombili 使用教程

    简介 dombili 是一款基于 React 的虚拟 DOM 库,适用于前端开发中的组件化开发和数据驱动视图渲染。 使用 dombili 使得开发人员能够更加便捷和高效的完成项目中的视图相关开发任务。

    3 年前
  • npm 包 apul_react_editor 使用教程

    前言 React 是一种广泛使用的前端框架,为开发人员提供了更简单、高效、动态的 UI 构建方式。apul_react_editor 是一款 React 编辑器组件,其可定制样式,支持多语言,且易于使...

    3 年前
  • npm 包 cachemanifest-webpack-plugin 使用教程

    前言 在前端开发中,缓存机制对于提高网站性能以及用户体验具有至关重要的作用。其中,使用缓存清单(Cache Manifest)是一种有效的缓存机制,并且已经被广泛应用于 HTML5 Web 应用和移动...

    3 年前
  • npm包generator-jhipster-postgresuuid-converter使用教程

    在前端开发中,我们经常需要使用npm包来提高开发效率,而 generator-jhipster-postgresuuid-converter 就是一款非常实用的包,可以用于将postgres中的uui...

    3 年前
  • npm 包 hyhc-data-status 使用教程

    介绍 hyhc-data-status 是一个能让前端开发者更方便的设置数据状态(如加载中、成功、失败等)的 npm 包,并且能提供统一的状态管理逻辑,适用于各类前端开发场景。

    3 年前
  • npm 包 lol-node 使用教程

    lol-node 是一款基于 Node.js 开发的、用于获取英雄联盟游戏数据的 npm 包。它提供了一系列 API,可以用于获取英雄联盟游戏中包括召唤师、英雄、比赛等信息的查询与处理。

    3 年前
  • npm 包 ts-event-dispatcher 使用教程

    在前端开发中,事件的处理非常重要。ts-event-dispatcher 是一个 npm 包,它可以帮助我们处理事件。本文将详细介绍 ts-event-dispatcher 的使用方法,包括引入、实例...

    3 年前
  • npm 包 vue-ac 使用教程

    在前端开发中,我们经常会使用到各种各样的框架和库,其中包括有非常流行的 Vue.js 。在应用 Vue.js 时,需要遵循一定的开发规范,如组件化、单向数据流、生命周期等等。

    3 年前
  • npm包whatsit-pubsub使用教程

    在前端开发中,我们经常需要处理消息传递的问题,whatsit-pubsub是一个用于实现异步消息传递的npm包。它提供了简单而强大的API,可以帮助我们在不同的组件、页面或模块之间传递消息。

    3 年前
  • npm 包 wu_hello 使用教程

    简介 wu_hello 是一个提供前端开发中常用功能的 npm 包,包括字符串和数组的处理工具函数以及常用的测试工具函数等。本文将介绍如何使用 wu_hello 包,并提供具体示例。

    3 年前
  • npm包@btcc_exchange/poloniex-orderbook使用教程

    简介 @btcc_exchange/poloniex-orderbook是一个npm包,用于对Poloniex交易所中的订单簿进行操作。该包提供了一系列的API,让用户可以方便地获取订单簿数据,以及对...

    3 年前
  • npm 包 code-auto 使用教程

    介绍 在前端开发中,我们经常需要大量的代码重复,而 code-auto(以下简称 CA)通过简化重复的代码写入,可以提高代码质量和开发效率。CA是一个用于快速生成代码的 npm 包,同时也适用于其他语...

    3 年前
  • npm包jeason-eslint-config使用教程

    在前端开发中,我们使用eslint来规范我们的代码。jeason-eslint-config 是一款前端团队内部使用的eslintrc规则配置,旨在提高代码的可读性、可维护性和一致性。

    3 年前
  • npm包 crc32c-webpack使用教程

    在前端开发中,我们会经常使用到各种npm包来解决自己所遇到的问题。其中,crc32c-webpack是一个非常实用的npm包,它可以帮助我们在webpack打包中对文件进行hash计算,并且提供了一些...

    3 年前
  • npm 包 fetch-robot 使用教程

    什么是 fetch-robot? Fetch-robot 是一个基于 Fetch API 封装而成的 npm 包,旨在简化从服务器上获取和处理数据的流程。Fetch-robot 支持链式调用,能够轻松...

    3 年前
  • NPM 包 Kotlin-Node 使用教程

    Kotlin是一种新型的JVM语言,它的出现为开发者带来了更多的选择。Kotlin可以与Node.js一样,用于构建前端应用、API和服务器端应用。不久前,Kotlin团队发布了一个npm包,叫做ko...

    3 年前

相关推荐

    暂无文章