What are the steps for incorporating a personalized background in Autodesk Forge?

Is it possible to set an image as the background? I am trying to achieve this but so far, I have only been able to do the following:

viewer.setLightPreset(4);
viewer.setQualityLevel(false, false);
viewer.setGhosting(true);
viewer.setGroundShadow(true);
viewer.setGroundReflection(true);
viewer.setEnvMapBackground(false);
viewer.setProgressiveRendering(true);

Unfortunately, none of these methods allow me to add an image for the background. If this feature is not supported within the API, could I at least change the background color instead? (not the loader background color, but the viewer's background color)

cssautodesk-forgeautodeskforgeautodesk-viewer

Answer №1

Unfortunately, there is no API available for altering the viewer background image directly. However, it is possible to implement a workaround in such cases. Please see the provided solution here.

On the other hand, you do have the option to modify the background color using viewer.setBackgroundColor. For instance, here's how you can change the background to red:

viewer.setBackgroundColor(255, 0, 0, 255, 255, 255)

The first three arguments represent the top clear color of the WebGLRenderer while the subsequent arguments indicate the bottom clear color. Unfortunately, there isn't detailed documentation explaining what these colors specifically refer to.

===== Update =====

Upon further investigation, I discovered the following:

  • To set the background color to a solid color, you should assign identical values to both the top and bottom clear colors. For example:

    // Change entire background to red.
viewer.setBackgroundColor(255, 0, 0, 255, 0, 0)

  • If you prefer a color gradient effect for the background, provide different values to the top and bottom clear colors. For instance:

    // Apply color gradient background with red on top and white at the bottom.
viewer.setBackgroundColor(255, 0, 0, 255, 255, 255)

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

What is the best way to change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen) HTML : <div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div> CSS : #container { width: 400px; height: 20px ...

jqueryhtmlcssreactjs

What is preventing a nested flexbox from expanding to the entire width?

Here's an example of some HTML/CSS code: <div style="display: flex; background-color: yellow;"> <div style="display: flex;background-color: lightblue;">i am a NESTED flexbox</div> </div> This results in Notice how the ...

htmlcssflexbox

Move the footer to the bottom of the content

I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet: <div id="container"> <div id="header"> ...

htmlcssfooter

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

Adjust the size of points positioned absolutely on an image map

Are you struggling to position POIs on a picture map correctly? Check out this link for more information: Even after trying CSS scale and re-positioning in media queries, getting the points in the right place seems impossible. What do you think? Can this ...

cssmedia-queriesscale

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

javascriptjqueryhtmlcss

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the ...

htmlcssbutton

instructions for ensuring gridview spans entire width of panel

I have a gridview that is contained within a panel. I am trying to make the gridview fill 100% of the width and height of the panel. This is what I've attempted so far: CSS .pnlGridView { position:relative; float:right; heig ...

asp.netcssgridview

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

javascriptjqueryhtmlcss

Two divisions inside another "wrapper" division - Adjusting the width

I'm facing an issue with my CSS. I have a container div "container" that contains two other divs - "left" and "main". The width of the container is set to 90% of the body's width, with a margin of 3% auto to center it. .container{ margin:3% auto ...

htmlcsswidth

What is the reason border-box does not function properly on inline-block elements?

Demo: http://jsfiddle.net/L5jchnpm/ I've encountered an issue where I believed that using display: inline-block would make elements act as both inline and block elements. Additionally, I thought that setting box-sizing: border-box would adjust the w ...

htmlcss

What is the best approach to dynamically bind a style property in Vue.js 3?

I am currently working with vue3 and I am trying to apply dynamic styles. This is how my vue3 template looks: <ul> <li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{ ...

cssvue.jstemplatesvuejs3

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjqueryhtmlcss

Change the background of the play/stop icon with a jquery toggle

There is a list of video links with play icons as backgrounds in front of them. When a user clicks on a link, the video will start playing in a player located to the left of the links. The clicked link's background icon changes to a 'stop' i ...

javascriptjqueryhtmlcsshyperlink

Defeat the all-powerful !important tag and enable dialog customization for positioning

I am currently developing a browser extension and I am encountering an issue with using JQueryUI to display a modal dialog. The problem arises when certain websites, for example espn.com, also utilize JQueryUI but do not properly scope their own elements. ...

javascriptjquerycssjquery-ui

Using PHP to wrap text based on the language at hand

I'm facing an issue with a small area (div or span) that can only display one to five words at a time. The problem arises when certain lengthy words like "muziekgeschiedenis" exceed the boundaries of this limited space. Is there a way in PHP to wrap s ...

phphtmlcssword-wrap

Columns in Bootstrap compressed

Seeking advice regarding setting up a recruitment portal for my employer. Having trouble with the bootstrap scaffolding - columns appear squashed on smaller devices despite using xs columns. Looking for guidance to make it more responsive. Would greatly a ...

htmlcsstwitter-bootstrap

Eliminate the dark backdrop from html5 videos that only shows up for a brief moment

Is there a way to remove the brief black background that appears when loading an HTML5 video? I have tried using CSS without success. The HTML: <div id="start-screen"> <video id="video-element"> <source src="video-mp4.mp4" type="vide ...

csshtmlvideohtml5-video

Definitions that are displayed dynamically when hovering over a particular element

I am seeking a way to implement popup definitions that appear when a div is hovered over. My website showcases detailed camera specifications, and I want users to see a brief definition when they hover over the megapixel class called '.mp'. One o ...

javascriptjqueryhtmlcsshover

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass