How to capture a specific part of a model using Autodesk Forge Viewer

I have a situation where I have 20 element Ids that I need to capture screenshots of in a specific size (400x400) like a detail view. The current viewer I am using has different dimensions, so I'm wondering if there is a way to achieve this and return the viewer back to its original state?

I attempted the following steps:

  1. Save the current view
  2. Adjust the viewer dimensions
  3. Use fitToView(elementIds) - I tried adjusting the camera manually, but I'm not very familiar with it. I also experimented with the fitToView function, but sometimes the elements end up out of the view.
  4. Take a screenshot at 400x400
  5. Restore the original view

I'm encountering some challenges with this process, so any assistance would be greatly appreciated.

javascriptthree.jsscreenshotautodesk-forge

Answer №1

To delve deeper into the dimensions of screenshots captured from Forge Viewer, check out this insightful blog post: .

If you're seeking further assistance for your specific use cases, you might want to consider incorporating an additional viewer instance on your webpage, tailored to the exact size of the desired screenshots, and only loading the necessary element IDs. For a demonstration of this concept, refer to this straightforward code snippet: https://github.com/petrbroz/forge-basic-app/commit/f95cb67944830b842955c9599f2e1e4683ff13f0.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Advanced jQuery Autocomplete with Nested Ajax Requests

I am currently developing a feature that allows users to search for albums using the Spotify Metadata API. The main functionality is working well, but I'm running into an issue with retrieving album cover art when making nested calls. This seems to be ...

javascriptjqueryjquery-uijquery-ui-autocompletespotify

Tips for dynamically changing the class of a form field in jQuery when it is empty

I am currently working on a form that looks like this; <form id="myform" name="myform"> <input type="text" class="required" value="" name="qwer" /><br /> <input type="text" value="" name="asdf" /><br /> <input type=" ...

javascriptjqueryvalidation

The ball refuses to fall into the designated boxes

I designed a basic webpage featuring 3 boxes that, when clicked on, trigger the dropping of a ball into them. Below is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function popup (n) { ...

javascripthtmlcss

Encountering CORS issue despite employing a CORS library

Encountering a CORS error while attempting to deploy my project on render using expressjs and react. The project functions smoothly on localhost, but changing the URLs to match the website results in this error: Access to XMLHttpRequest at 'https:// ...

javascriptexpresshttp-status-code-503render.com

How to implement the ECharts animated bar chart in Angular version 16?

The animated bar chart in ECharts functions perfectly on Stackblitz. You can check it out here in the Stackblitz Angular 16 demo. However, attempting to run the same demo in a local Angular 16 project led to the following errors. Error: src/app/animated- ...

javascriptangulartypescriptechartsngx-echarts

What causes Vue to drop nested component data within a v-for loop?

Witness the mysterious behavior through my fiddles: Anticipated outcome: https://jsfiddle.net/o7c9mwzf/27/ By clicking "unshift," I add an element to the beginning of my items array. After setting its data, clicking "unshift" again should maintain the el ...

javascriptvue.jsvuejs2vue-component

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

How to dynamically change the border-top color of an <a> tag in a menu using a jQuery loop

I am interested in adding a colorful border-top to my menu using jQuery. I know this can be achieved with HTML by including style="border-top-color: red;", but I want to explore the jQuery method. Here is what I have attempted so far: var colors = [ ...

javascriptjquerycss

Prevent the execution of useEffect on the client side in Next JS if the data has already been retrieved from the server

Upon loading the server side rendered page, data is fetched on the server and passed to client side components. To handle this process, a hook has been created with a state that updates based on checkBox changes. When the state changes, a useEffect is tri ...

javascriptreactjsperformancenext.jsserver-side-rendering

Exploring the intricacies of Knockout JS mapping nested models using fromJS function

I am struggling with understanding how to effectively utilize the Knockout JS Mapping Plugin. My scenario involves nested models, and currently I am only using the ko.mapping.fromJS() in the parent model. However, I have noticed that the computed values ar ...

javascriptjqueryrestknockout.jsknockout-mapping-plugin

Increase the jQuery Array

After successfully initializing an Array, how can I add items to it? Is it through the push() method that I've heard about? I'm having trouble finding it... ...

javascriptjquery

Create-react-app unable to activate Service Worker

I've been utilizing the power of create-react-app to create my react.js project. Whenever I use the command npm run build, it automatically integrates a service-worker for progressive web app functionality in the production build. Everything was runn ...

javascriptreactjscreate-react-app

What is the process for obtaining an API Key in order to access a service prior to authorization?

Alright, I have this app. It's a versatile one - can run on mobile devices or JavaScript platforms. Works across Windows, Apple, and Android systems. The app comes equipped with a logging API that requires an API key for operation. Specifically, befo ...

javascriptandroidiphonesecuritymobile

JavaScript Class Reference Error

Questioning the mysterious reference error in the JS class from MDN page. The structure of the Bad class's constructor leaves me baffled – is it because the empty constructor calls super() as a default? class Base {} class Good extends Base {} cla ...

javascript

Get Onsen UI 2 up and running without the need for Angular

Is it possible to install Onsen UI 2 without Angular? I have tried following various guides from , but when attempting the JavaScript method (> npm install onsenui) I consistently encounter a ReferenceError: angular is not defined. How can I properly in ...

javascriptangularjscordovaonsen-uionsen-ui2

What are the steps to execute Mike Bostock's D3 demonstrations?

I've been attempting to run Mike Bostock's See-Through Globe demonstration, but I encountered issues with the correct referencing of his json files when attempting to replicate it locally. The problem stems from this particular line of code: d3. ...

javascriptjsond3.js

What is the process for attaching an event handler to an element that is displayed after a button click?

I need some assistance with my JavaScript code. I have a page with two links, and when the second link is clicked, certain fields are displayed. I am trying to write an onkeyup() event handler for one of these fields, but seem to be missing something. Here ...

javascriptjquery

Trouble with escaping characters in Javascript?

My code looks like this: `message.channel.send( const Discord = require('discord.js'); const client = new Discord.Client(); const token = 'your bot token here'; client.on('ready', () => { console.log('I am ready!& ...

javascriptnode.js

Unexpectedly, the NodeJS application experiences a crash following numerous requests

I can't seem to figure out why my Nodejs app crashes after a certain number of requests (currently 22). The issue arises with this simple get request handler: router.get('/api/docs/fetch', async (req,res) => { try{ let docs = ...

javascriptnode.jsexpressrequest

elevate the div with a floating effect

My goal is to create a chat feature for users that will only be visible for a limited time period. I was thinking of using PHP and timestamp to achieve this functionality, but I also want to make the chat visually disappear by having the message div float ...

javascriptjquery