Web3D is a graphics library with reusable and extensible graphics environment for viewing and editing of 3D content. It supports different model formats and content types using its plugins, all working together using single unified rendering and interaction architecture.
This is an inner-source project, contributions are welcomed.
For more info, docs and demos: https://web3d.trimble.com
Ask Filipp Keks in Google Chat
The web3d packages are hosted on Trimble's Artifactory server and thus authentication is required. To authenticate you need to generate your API key on your Artifactory profile page and save it to .npmrc file:
curl -uYOUR_EMAIL:YOUR_KEY "https://artifactory.trimble.tools/artifactory/api/npm/technology-virtual-npm/auth/technology" >> ~/.npmrc
Command above is for bash shell, works on linux, mac and windows with bash shell installed. On default windows installation open the url in the browser and copy-paste response page source to %userprofile%\.npmrc (NB! copy page source, not page html)
After you've setup Artifactory, you can go ahead and add the viewer as a dependency to your project:
$ npm install --save @technology/web3d
$ npm install --save @technology/web3d-plugin-trimbim
For usage in non-transpiled JavaScript, import modules from dist/es, i.e:
import { Web3DViewer } from "./node_modules/@technology/web3d/dist/es/index.js";
import { TrimbimPlugin } from "./node_modules/@technology/web3d-plugin-trimbim/dist/es/index.js";
For usage in TypeScript or transpiled JavaScript import modules by package name, i.e:
import { Web3DViewer } from "@technology/web3d";
import { TrimbimPlugin } from "@technology/web3d-plugin-trimbim";
Make sure your transpiler's (webpack, rollup, esbuild.. etc) module resolution mode is set to node
In case of TypeScript, tsconfig.json should contain these lines
"moduleResolution": "node",
"skipLibCheck": true,
NOTE! Avoid importing modules using full path, i.e. @technology/web3d/dist/esnext/Web3DViewer, let transpiler choose the build type, also modules which are not added to index, are not part of the public API.
It is recommended to pack your application code to ES modules, marking web3d as external, importing from dist/es at runtime. ES modules are faster, comparing to i.e. commonjs and browser is able to load those in parallel.
Code transpilers might break paths of external resources (i.e. images or worker scripts). To avoid bundling issues it is recommended to configure your transpiler to use external web3d modules, instead of bundling with app code. This would also increase your app compilation and loading time.
See Webpack external or Rollup external documentation
In case if using external modules is not possible you can manually deploy web3d resources and use settings to specify proper urls. i.e. Settings.staticRootUrl for images and TrimbimSettimgs.workerUrl for workers.
Avoid using isolatedModules TypeScript compiler option together with external web3d modules, as it breaks enum constants resolution.
Check for usage examples code, which are available on https://web3d.trimble.com
Examples of integration with popular frameworks can be found here
Project is opened for contributions. Before contributing, please discuss your idea with project developers. Contact Filipp Keks. You are also welcomed to experiment with current code base locally.
Development setup requirements:
Setup artifactory repository for build dependencies
curl -uYOUR_EMAIL:YOUR_KEY "https://artifactory.trimble.tools/artifactory/api/npm/trimblesolutions-technology-npm/auth/technology" >> ~/.npmrc
curl -uYOUR_EMAIL:YOUR_KEY "https://artifactory.trimble.tools/artifactory/api/npm/trimble-fulcrum-npm/auth/fulcrum" >> ~/.npmrc
curl -uYOUR_EMAIL:YOUR_KEY "https://artifactory.trimble.tools/artifactory/api/npm/technology-virtual-npm/auth/materia" >> ~/.npmrc
npm config set @trimble-livesharing:registry https://artifactory.trimble.tools/artifactory/api/npm/technology-virtual-npm/
Commands above is for bash shell, works on linux, mac and windows with bash shell installed. On default windows installation open the urls in the browser and copy-paste response page source to %userprofile%\.npmrc
To build and run demos locally, install dependencies and start development server, from project root directory
npm install
npm run build
npm start
Demo will be available at: http://localhost:8081
Note: Virtual Reality demos require secure https, so use npm run start-https and open https://localhost:8081 instead
Source maps are generated containing full TypeScript sources, so just start viewer in watch mode npm run watch and debug using your favorite IDE.
To run tests inside WebStorm, configure mocha runner working dir as project root (i.e. web3d/) and mocha package as "test" directory (i.e. web3d/test). To make this configuration default, make same changes to mocha run template, go to Run -> Edit configurations -> Edit configuration templates -> Mocha
On macOS, in case if npm install fails on canvas package build, install xcode command line tools and Homebrew, then run
xcode-select --install
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
npm install canvas
In case if npm install fails on puppeteer package chromium browser download, check your internet connection and run manually
npm install puppeteer
webgl-plugin-potree, use webgl-plugin-potreemanager insteadwebgl-plugin-itowns, use webgl-plugin-3dtiles insteadSettings.environmentMapEncoding is replaced with Settings.environmentMapColorSpacePublicCamera.projectionType = type setter is now asynchronous, added awaitable alternative await PublicCamera.setProjectionType(type)web3d-plugin-section plugin is droppedTrimbimModel.getHierarchyChildren signature changed, hierarchyType parameter addedLong interface (originated from flatbuffers library) is replaced with native bigint primitive typewebgl-viewer-* to web3d-*webgl-viewer to web3d-viewerWebglViewer -> Web3DViewer, WebglViewerEventName -> Web3DEventName, WebglViewerPlugin -> Web3DPlugindist/amd build, use dist/es modules insteaddist/esnext upgraded from es2021 to es2022, make sure your built tools support it, use dist/es otherwiseSettings.useWebgl2PotreePlugin.settings.disableFragDepthExtensiondemos/envmap.html for optionsPotreePlugin.settings.workerRootUrl renamed to workerUrlTrimbimSettings.workerRootUrl replaced with full URL TrimbimSettings.workerUrl. defaults to import.meta.url + "dist/workers/TrimbimWorker.js"TrimbimModel.getHierarchy replaced with getHierarchyRoots, getHierarchyParents and getHierarchyChildrenTrimbimModel.getEntityInfo replaced with getEntities, getProducts and getPropertiesIColor interface replaced with Color objects in all public interfacesPotreePlugin.pointSizeType, PotreePlugin.pointShape and PotreePlugin.pointColorTypeVector4 in PotreePlugin.classificationsSettings.materialAttenuation replaced with Settings.darkModeMaterials@technology/web3d or @technology/web3d-plugin-xxx. i.e. import { WebglViewer } from "@technology/web3d";. Exception: imports from */Examples/* and */Extras/* are unchanged.Vector3, Quaternion, Matrix4 and Euler etc.) with classes imported from webgl-viewer package. i.e. import { Vector3 } from "@technology/web3d""WebglViewer.camera.quaternion is facing opposite direction comparing to 1.1, to be compatible with Threejs builtin camera.WebglViewer.icons moved to separate plugin, it should be added explicitly and is accessed from WebglViewer.plugins.iconsviewer.tools.clipPlane.getClipPlanes() instead of viewer.tools.clipPlanes, and viewer.plugins.markup.getMarkups() instead of viewer.plugins.markupviewer.tools.measurement.add() instead of markup plugin viewer.plugins.markup.add()TrimbimSettings.hiddenLayers replaced with TrimbimModel.setLayerVisibilityPlane interface removed, all usages replaced by 2 variables position and normalColor interface renamed to IColorTrimbimPlugin.getModelIds() replaced with getModels(), TrimbimPlugin.getModel(modelId) replaced with WebglViewer.getModel(modelId, TrimbimModel)viewer.tools.picking.enable = true to enable picking events.