@cognite/3d-viewer
Advanced tools
> Visualize Cognite's 3D models in a web browser with [WebGL](https://en.wikipedia.org/wiki/WebGL).
Visualize Cognite's 3D models in a web browser with WebGL.
$ npm install @cognite/3d-viewer
import { Cognite3DViewer } from '@cognite/3d-viewer';
const viewer = new Cognite3DViewer();
<script src="{path to this folder}/lib/cognite.bundle.js"></script> // Now you have 'cognite' as a global object
<script>
var viewer = new cognite.Cognite3DViewer();
</script>
const viewer = new Cognite3DViewer();
// The viewer will render to a canvas.
// Add this canvas to your DOM
document.body.appendChild(viewer.canvas);
// start rendering
viewer.start();
// At this point you will only see a black canvas.
// So let's add a 3D model:
const options = {
projectName, // Project name (tenant) in Cognite's Data Platform
modelId, // 3D model id (has to be under the same project)
revisionId, // The model's revision id
};
viewer.addModel(options).then(function(model) {
// Move camera to look at the model
viewer.fitCameraToModel(model, 0);
});
Note: you may need additional styling to the canvas to make it fit your use-case
canvas { width: 100%; height: 100%; }
function onProgress(progress) {
console.log(progress);
}
function onComplete() {
console.log('Model loaded');
}
const options = {
projectName,
modelId,
revisionId,
onProgress, // optional
onComplete, // optional
};
viewer.addModel(options)...
viewer.on('click', function(event) {
const { offsetX, offsetY } = event;
const nodeId = model.getNodeIdFromPixel(viewer.camera, viewer.renderer, offsetX, offsetY);
if (nodeId != null) {
// highlight the object
model.selectNode(nodeId);
// make the camera zoom to the object
const boundingBox = model.getBoundingBox(nodeId);
viewer.fitCameraToBoundingBox(boundingBox, 2000); // 2 sec
} else {
// Clicked outside the 3D model
}
});
Cognite3DViewer is the root class of a Cognite 3D viewer. It controls all aspects of the 3D viewer.
options Object (optional, default {})
options.noBackground boolean -- Transparent background or not (optional, default false)const viewer = new Cognite3DViewer({
noBackground: true,
});
Check if the viewer supports the current browser
if (!viewer.isSupported()) {
// create an error message to the user?
}
Start viewer, or resume after calling stop().
viewer.start();
Stop the viewer. When stopped, the viewer will not do work, but it's state will be kept so it can restart immediately after start() is called.
viewer.stop();
Add event listener to the viewer call off to remove an event listener
type "click"func function (event:MouseEvent) -- The callback functionconst onClick = event => { ... };
viewer.on('click', onClick);
Remove event listener from the viewer call on to add an event listener
viewer.off('click', onClick);
Add a new 3D model to the viewer. call fitCameraToModel to see the model after the model has loaded
options Object
options.projectName string -- The Cognite project the 3D model belongs tooptions.modelId number -- The model's idoptions.revisionId number -- The model's revision idoptions.sceneId string -- Default to the latest scene (optional, default 'latest')options.onProgress function (progress: Object)? -- Callback for progress eventsoptions.onComplete function? -- Callback when the model is fully loadedconst options = {
projectName: 'COGNITE_TENANT_NAME',
modelId: 'COGNITE_3D_MODEL_ID',
revisionId: 'COGNITE_3D_REVISION_ID',
};
viewer.addModel(options).then(model => {
viewer.fitCameraToModel(model, 0);
});
Returns Promise<Cognite3DModel>
Returns camera's position
const position = viewer.getCameraPosition();
Returns THREE.Vector3 Position in global space
Returns camera's target
const target = viewer.getCameraTarget();
Returns THREE.Vector3 Target in global space
Set camera's position
position THREE.Vector3 -- Position in global space// store position, target
const position = viewer.getCameraPosition();
const target = viewer.getCameraTarget();
// restore position, target
viewer.setCameraPosition(position);
viewer.setCameraTarget(target);
Set camera's target
target THREE.Vector3 -- Target in global space// store position, target
const position = viewer.getCameraPosition();
const target = viewer.getCameraTarget();
// restore position, target
viewer.setCameraPosition(position);
viewer.setCameraTarget(target);
Move camera to a place where the content of a bounding box is visible to the camera
box THREE.Box3 -- The bounding boxduration number? -- The duration of the animation moving the camera. Set this to 0 (zero) to disable animation.radiusFactor number? -- The the ratio of the distance from camera to center of box and radius of the box (optional, default 4)Enables camera navigation with the keyboard.
Disables camera navigation with the keyboard.
Move camera to a place where the 3D model is visible. It uses the bounding box of the 3D model and calls fitCameraToBoundingBox
model Cognite3DModel -- The 3D modelduration number? -- Same as for fitCameraToBoundingBoxTake screenshot from the current camera position.
width number? -- Width of the final image. Default is current canvas size.height number? -- Height of the final image. Default is current canvas size.Returns Promise<string> A Blob URL to the image ('image/png')
Extends THREE.Object3D
Cognite3DModel is the class represeting a Cognite 3D model and it's state
Get bounding box of a node
nodeId number -- The node's idbox THREE.Box3? -- Optional target. Specify this to increase performance if the box can be reused.const box = model.getBoundingBox(nodeId);
const reusableBox = new THREE.Box3();
const box = model.getBoundingBox(nodeId, reusableBox);
// box === reusableBox
Returns THREE.Box3
Raycasting for nodes
camera THREE.Camera -- The camera to project fromrenderer THREE.WebGLRenderer -- A renderer. The raycaster will render an image to memory for efficiency.x number -- X coordinate in pixelsy number -- Y coordinate in pixelsconst box = model.getBoundingBox(nodeId);
const reusableBox = new THREE.Box3();
const box = model.getBoundingBox(nodeId, reusableBox);
// box === reusableBox
Returns (number | null) -- If there was a hit then returns the node id
Return the color on a node
nodeId number -- The node's idReturns {r: number, g: number, b: number, a: number}
Set the color on a node
nodeId number -- The node's idr number -- The red color value (0-255)g number -- The green color value (0-255)b number -- The blue color value (0-255)a number -- The alpha value (0-255) (optional, default 255)Mark a node as selected
nodeId number -- The node's idsubtreeSize number -- To select a subtree with nodeId as root. (optional, default 1)Mark a node as deselected
nodeId number -- The node's idMark all selected nodes as deselected
Get the assets associated with a given node.
projectName string -- The Cognite project that the 3D model belongs tomodelId number -- The ID of the 3D modelrevisionId number -- The ID of the 3D model revisionnodeId number -- The ID of the node to get the associated assets ofReturns Promise<[AssetMapping]>
Type: object
nodeId number -- The node id for the mappingassetId number -- The mapped asset idsubtreeSize number -- Size of the subtree with the node with id = nodeId as rootGet the node ids associated with a given asset.
projectName string -- The Cognite project that the 3D model belongs tomodelId number -- The ID of the 3D modelrevisionId number -- The ID of the 3D model revisionassetId number -- The ID of the asset to get the associated nodes ofReturns Promise<[AssetMapping]>
Cognite3DModelLoader is the class used to load a Cognite 3D model to Three.js.
options Object? (optional, default {})
options.projectName string -- The Cognite project the 3D model belongs tooptions.modelId number -- The model's idoptions.revisionId number -- The model's revision idoptions.sceneId string -- Default to the latest scene (optional, default 'latest')options.onProgress function (progress: Object)? -- Callback for progress eventsoptions.onComplete function? -- Callback when the model is fully loadedconst options = {
projectName: 'COGNITE_TENANT_NAME',
modelId: 'COGNITE_3D_MODEL_ID',
revisionId: 'COGNITE_3D_REVISION_ID',
};
Cognite3DModelLoader.load(options).then(model => {
// if we have a THREE.Scene then:
scene.add(model);
});
Returns Promise<Cognite3DModel>
yarn (npm install -g yarn).yarn to install packages.yarn run start and go to http://localhost:3000 where the index.html file is hosted.Check out scripts in package.json for more commands.
yarn publish, make sure you have bumped the version first!yarn run pbjs -t json -o src/proto/web_scene.json {path to web_scene.proto}FAQs
JavaScript viewer to visualize 3D models on Cognite Data Fusion
The npm package @cognite/3d-viewer receives a total of 109 weekly downloads. As such, @cognite/3d-viewer popularity was classified as not popular.
We found that @cognite/3d-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 176 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.